Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

canvas

The <canvas> element is aptly named. It supplies us with a means of drawing things through script and it renders in a browser. Assets can be stationary or animated on the canvas. We use JavaScript to draw what we want in the canvas and animate those things. Interaction and Event listeners can also be applied to canvas elements using JavaScript.

Code Example

<!DOCTYPE html> <html> <head> <script> window.onload = draw; // Execute draw function when DOM is ready function draw() { // Assign our canvas element to a variable var canvas = document.getElementById("canvas1"); // Create the HTML5 context object to enable draw methods var ctx = canvas.getContext("2d"); // Draw Filled Shape 1 (center triangle of logo) ctx.beginPath(); ctx.moveTo(100, 50); ctx.lineTo(130, 100); ctx.lineTo(70, 100); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fill(); // Draw Filled Shape 2 (left flap of logo) ctx.beginPath(); ctx.moveTo(72, 60); ctx.lineTo(85, 72); ctx.lineTo(71, 94); ctx.lineTo(50, 70); ctx.lineTo(65, 40); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fill(); // Your homework is to Draw Filled Shape 3 here (right flap) // to complete the shape of the WorldOfWebcraft.com logo } </script> </head> <body> <canvas id="canvas1" width="400" height="300">Fallback Content</canvas> </body> </html> open in code editor

Attributes

globals - the global attributes common to all elements possible values: see global attribute list width - sets the width of the canvas(can also be done using CSS) possible values: "integer" height - sets the height of the canvas(can also be done using CSS) possible values: "integer"

Canvas Programming Training Course

Learn to program the canvas element in depth in this detailed JavaScript video tutorial series.

video/JavaScript#Canvas-Programming

Official Documentation

http://www.w3.org/TR/html/scripting-1.html#the-canvas-element

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr