Home>Web design tutorial>HTML tutorial

HTML5 canvas element detailed tutorial 1

Author：Eve Cole Update Time：2025-04-05 11:00:03
HTML5 canvas element detailed tutorial 1: Basic usage.

<canvas> is a brand new element in Html5, which can be used by JavaScript to draw graphics. First, <canvas> was introduced on Apple's Mac OS X Dashboard, which was applied to Safari, and then based on the Gecko1.8 browser, which also supports this new element, such as the Firefox browser. Today, the <canvas> element is part of the HTML5 standard specification.

We will explain what <canvas> can do, through this tutorial, and it can be used as the starting point for your application <canvas>. Learning <canvas> elements is not difficult. You only need to have the basic knowledge of HTML and JavaScript, as well as Firefox browser, Safari latest version or Opera9+, so that you can see all the example effects.

Now let's start with how to define the <canvas> element.

<canvas id=tutorial width=150 height=150></canvas>

The <canvas> element has only two attributes, Width and Height, which are optional and can be controlled using DOM or css. If width and height are not set, the default width is 300 pixels and 150 pixels high is used. Although the size of <canvas> can be controlled and adjusted through css, the rendered image will be scaled to adapt to the layout. Once the rendering results are found to look deformed, you do not have to rely on css. You can specify the values ​​of width and height displayed in <canvas>. Just like standard HTML tags, id attributes can also be defined, which can make script application more convenient. The <canvas> element can specify its style (margins, borders, backgrounds, etc.) like a normal picture. However, these styles do not have any effect on the actual image generated by canvas.

Because this element is relatively new, not all browsers support it, so we need to provide alternative display information for those who cannot browse normally. It can use text or pictures:

  1.  <canvasid=stockGraphwidth=150height=150>
  2.  Your browser does not support the <canvas> element.
  3.  </canvas>
  4.  <canvasid=clockwidth=150height=150>
  5.  <imgsrc=images.pngwidth=150height=150alt=Replace image/
  6.  </canvas>

In Apple Safari, the implementation of <canvas> is very similar to <img>, and it has no end tag. However, in order for <canvas> to be widely applicable in the web world, alternative content needs to be provided with a place to stay, so it is necessary to end the tag (</canvas>) in Mozilla implementation. <canvas id=foo ...></canvas> is fully compatible with Safari and Mozilla - Safari simply ignores the end tag. If there is alternative content, you can use some CSS tricks to hide alternative content for and only for Safari, because those alternative content needs to be displayed in IE but not in Safari.

<canvas> Creates a fixed-size drawing screen with one or more rendering contexts that can control what to display. We focus on 2D rendering, which is also the only option at present. We may add 3D rendering based on OpenGL ES in the future.

  1.  varcanvas=document.getElementById('tutorial');
  2.  varctx=canvas.getContext('2d');

Let's explain the above code. The initialization of <canvas> is blank. To draw a script, you need to render the context first. It can be obtained through the getContext method of the canvas element object. At the same time, some functions that need to be called for drawing are also obtained. getContext() accepts a value that describes its type as an argument. The first line above obtains the DOM node of the canvas object through the getElementById method. Then use its getContext method to obtain its drawing operation context. In addition, we can also use scripts to determine the browser's support for <canvas>, that is, to determine whether the getContext exists.

  1.  varcanvas=document.getElementById('tutorial');
  2.  if(canvas.getContext){
  3.  varctx=canvas.getContext('2d');
  4.  //drawingcodehere
  5.  }else{
  6.  //canvas-unsupportedcodehere
  7.  }

We start with the simplest template below, you can copy them to your local backup.

  1.  <html>
  2.  <head>
  3.  <title>Canvastutorial</title>
  4.  <scripttype=text/javascript>
  5.  functiondraw(){
  6.  varcanvas=document.getElementById('tutorial');
  7.  if(canvas.getContext){
  8.  varctx=canvas.getContext('2d');
  9.  }
  10.  }
  11.  </script>
  12.  <styletype=text/css>
  13.  canvas{border:1pxsolidblack;}
  14.  </style>
  15.  </head>
  16.  <bodyonload=draw();>
  17.  <canvasid=tutorialwidth=150height=150></canvas>
  18.  </body>
  19.  </html>

Carefully you will find a function called draw, which will be executed once after the page is loaded (by setting the onload property of the body tag), and of course it can also be called in setTimeout, setInterval, or other event handling functions.

To start, let's take a simple look - draw two interlaced rectangles, one of which has an alpha transparent effect. We will give you a detailed look at how it works in the following example.

  1.  <html>
  2.  <head>
  3.  <scripttype=application/x-javascript>
  4.  functiondraw(){
  5.  varcanvas=document.getElementById(canvas);
  6.  if(canvas.getContext){
  7.  varctx=canvas.getContext(2d);
  8.  ctx.fillStyle=rgb(200,0,0);
  9.  ctx.fillRect(10,10,55,50);
  10.  ctx.fillStyle=rgba(0,0,200,0.5);
  11.  ctx.fillRect(30,30,55,50);
  12.  }
  13.  }
  14.  </script>
  15.  </head>
  16.  <bodyonload=draw();>
  17.  <canvasid=canvaswidth=150height=150></canvas>
  18.  </body>
  19.  </html>

You can copy the above code to the HTML file to run, renderings:

Related Articles