Fandom

HTML & CSS Wiki

Canvas

648pages on
this wiki
Add New Page
Comments0 Share

The HTML <canvas></canvas> element can be used to draw graphics via scripting (usually JavaScript). It can be used to draw graphs, make photo compositions or even perform animations.

Mozilla applications gained support <canvas> starting with Gecko 1.8 (Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer, prior to version 9.0 beta, does not support <canvas>, but a page can effectively add support for it by including a script from Google's Explorer Canvas project. Opera 9 also supports <canvas>.


AttributesEdit

  • width - The width of the coordinate space in CSS pixels. Default is 300.
  • height - The height of the coordinate space in CSS pixels. Default is 150.
  • See Global HTML Attributes for more.


HTML example:

<html>
 <head>
  <script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150">
     <p>This example requires a browser that supports the
     <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
     <canvas> feature.</p>
   </canvas>
 </body>
</html>

That produces:

Canvas in Firefox 3.6.10.

Rendering Edit

The canvas is used as an area to draw on, but by itself does not have a visual appearance.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.