In this HTML5 Canvas Javascript Render post two effects are created using javascript methods on a html5 canvas element.

HTML5 Canvas Javascript Render.
The first example uses the following six methods to create an animated curved ‘sine’ line.

See the Pen html5javascriptsine by Daniel (@Parsons) on CodePen.

The next HTML5 canvas javascript render example uses the same javascript methods as above however the ‘Math.cos()’ method replaces the ‘Math.sin()’ method.

See the Pen mathCoshtml5JSRender by Daniel (@Parsons) on CodePen.

Here is a simpler example using the ‘document.getElementById()’ method to access the canvas with an id of ‘mycanvas’. The ‘getContext()’ method is used to return a drawing context on the canvas. A ‘CanvasRenderingContext2d is passed to provide a ‘2d’ drawing surface. The ‘fillStyle propery‘ is used to fill the rectangle with a red color. The ‘fillRect() method‘ draws the rectangle at position 10, 10 with a width of 100 and a height of 100.

See the Pen getContextJShtml5canvas by Daniel (@Parsons) on CodePen.


A red square can of course be just as easily created with css.

See the Pen cssCanvasRect by Daniel (@Parsons) on CodePen.

Another option is svg (Scalable Vector Graphics).

See the Pen svgRect by Daniel (@Parsons) on CodePen.

Another HTML5 Canvas Javascript Render method is ‘ CanvasRenderingContext2D.strokeText()‘. Here is a simple example.

See the Pen strokeTextCanvas by Daniel (@Parsons) on CodePen.

HTML5 Canvas Javascript Render

The next example uses the ‘CanvasRenderingContext2D.fillText()‘ javascript method. The ‘font property‘ is also used to place text on a html5 canvas element.

See the Pen CanvasRenderingContext2D.fillText by Daniel (@Parsons) on CodePen.

Another HTML5 Canvas Javascript Render method is ‘CanvasRenderingContext2D.strokeRect()‘ and in this example is used with the ‘strokeStyle property‘.

See the Pen strokerectjavascript by Daniel (@Parsons) on CodePen.


And finally drawing lines in a html5 canvas with javascript. The ‘CanvasRenderingContext2D.lineWidth‘ propery is used in this example.

See the Pen renderingCanvasLine by Daniel (@Parsons) on CodePen.

The ‘CanvasRenderingContext2D.lineJoin‘ property determines how two line segments are joined together.

See the Pen lineJoinPropery by Daniel (@Parsons) on CodePen.

More on Javascript

HTML5 logo. HTML5 Canvas Javascript Render
Javascript logo. HTML5 Canvas Javascript Render

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *