Tutorial by Examples

Html5-Canvas ... Is an Html5 element. Is supported in most modern browsers (Internet Explorer 9+). Is a visible element that is transparent by default Has a default width of 300px and a default height of 150px. Requires JavaScript because all content must be programmatically added to the Canv...

The size of a canvas is the area it occupies on the page and is defined by the CSS width and height properties. canvas { width : 1000px; height : 1000px; } The canvas resolution defines the number of pixels it contains. The resolution is set by setting the canvas element width and heigh...

Many times when working with the canvas you will need to have a canvas to hold some intrum pixel data. It is easy to create an offscreen canvas, obtain a 2D context. An offscreen canvas will also use the available graphics hardware to render. The following code simply creates a canvas and fills it ...

This example will show how to get the mouse position relative to the canvas, such that (0,0) will be the top-left hand corner of the HTML5 Canvas. The e.clientX and e.clientY will get the mouse positions relative to the top of the document, to change this to be based on the top of the canvas we subt...

HTML <canvas id="canvas" width=300 height=100 style="background-color:#808080;"> </canvas> Javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "34px serif"; ctx.textAlign = &qu...

Capabilities of the Canvas Canvas lets you programmatically draw onto your webpage: Images, Texts, Lines and Curves. Canvas drawings can be extensively styled: stroke width, stroke color, shape fill color, opacity, shadowing, linear gradients and radial gradients, font face, font ...

The rotate(r) method of the 2D context rotates the canvas by the specified amount r of radians around the origin. HTML <canvas id="canvas" width=240 height=240 style="background-color:#808080;"> </canvas> <button type="button" onclick="rotate_c...

You can save a canvas to an image file by using the method canvas.toDataURL(), that returns the data URI for the canvas' image data. The method can take two optional parameters canvas.toDataURL(type, encoderOptions): type is the image format (if omitted the default is image/png); encoderOptions is ...