Basic drawing

By Martin McBride, 2017-04-09
Tags: html canvas
Categories: graphics html canvas

To create drawings with HTML5 canvas you will need two things:

  • A basic HTML page with a canvas element.
  • Javascript code to draw on the canvas.

For simple pages, these can be included in the same file. This makes things easier because you can open the combined file in a browser to view it.

Basic HTML page

Here is a bare-bones HTML page.

<!DOCTYPE HTML>
<html>
  <head>
  </head> 
  <body>
      canvas id="myCanvas" width="400" height="200</canvas>
  </body>
</html>

This page is empty except for a canvas element. The canvas is 400 pixels wide, by 200 pixels high. However, we haven't drawn anything on it yet, so if you look at the page in a browser it will be blank.

Adding the Javascript

Here is some Javascript to draw a rectangle on the canvas:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.fillStyle = 'blue';
context.fillRect(100, 50, 200, 75);

Here is what it displays:

image

Looking at the Javascript

The first two lines of the Javascript are needed pretty much every time you use a canvas:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

We get a canvas object by calling getElementById. This is a standard DOM call to get a page object. The parameter we pass, myCanvas is the id we gave to the canvas in the HTML.

The second line obtains a ''drawing context'' for the canvas. This is the interface we need to actually draw things.

Now we get to the drawing code:

context.fillStyle = 'blue';
context.fillRect(100, 50, 200, 75);

First we set the fillStyle to 'blue'. There are various ways to [[HTML5 canvas colours|set the colour]], the easiest is just to use the colour name (standard CSS names are supported).

Next, fillRect(x, y, width, height) defines a rectangle at position (x, y), which is (100, 50) in our case. The width of the rectangle is 200 pixels and the height is 75 pixels. All measurements are in pixels.

Putting it all together

For simple test pages, the HTML and Javascript can be combined in a single page. Save the following code as as HTML file and open it locally in your browser:

<!DOCTYPE HTML>
<html>
  <head>
  </head> 
  <body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.fillStyle = 'blue';
        context.fillRect(100, 50, 200, 75);
    </script>
  </body>
</html>      

See also

Sign up to the Creative Coding Newletter

Join my newsletter to receive occasional emails when new content is added, using the form below:

Popular tags

555 timer abstract data type abstraction addition algorithm and gate array ascii ascii85 base32 base64 battery binary binary encoding binary search bit block cipher block padding byte canvas colour coming soon computer music condition cryptographic attacks cryptography decomposition decryption deduplication dictionary attack encryption file server flash memory hard drive hashing hexadecimal hmac html image insertion sort ip address key derivation lamp linear search list mac mac address mesh network message authentication code music nand gate network storage none nor gate not gate op-amp or gate pixel private key python quantisation queue raid ram relational operator resources rgb rom search sort sound synthesis ssd star network supercollider svg switch symmetric encryption truth table turtle graphics yenc