Canvas From Scratch: Introducing Canvas
Tutorial Details
- Topic: HTML5
- Difficulty: Easy
- Estimated Completion Time: 30 minutes
This is the first article in a series that will bring you up to speed with HTML5 canvas, the plugin-less drawing functionality built into modern browsers. In this introductory article, I’ll show you how to access the canvas element, draw shapes, change colours, and erase things. It’s a whistle-stop tour of the basics of this amazing new Web technology.
Prefer a Video Tutorial?
Change the resolution to 720 for a clearer picture.
Subscribe to our YouTube page to watch all of the video tutorials!
The series will be an exciting ride, and one that I hope you enjoy. I’m assuming that you’re already comfortable with JavaScript, but have little to no experience with canvas. Even if you’re new to JavaScript, don’t fret, as you’ll still learn something from these articles.
Introducing the Canvas Element
Using the canvas element is dead easy.
When you think of canvas, you probably think about the new HTML5 canvas element. Technically, this is only one half of the story, but let’s forget about that for now. The canvas element is the public face of this fancy new feature of the browser.
Using the canvas element is dead easy; it’s one simple HTML tag, with a defined width and height.
<canvas width="500" height="500"> <!-- Insert fallback content here --> </canvas>
This doesn’t do much yet. In fact, all it does is insert a transparent canvas on your page. The content inside of the canvas element is fallback content, which will only display if a browser doesn’t support canvas.
Browser support
Browser support for canvas is pretty amazing.
It’s important to point out that the browser support for canvas is pretty amazing. Every modern browser supports it, including the latest Internet Explorer.
- Internet Explorer (9.0+)
- Safari (3.0+)
- Firefox (3.0+),
- Chrome (3.0+)
- Opera (10.0+)
- iOS (1.0+)
- Android (1.0+)
Interestingly, you can use some canvas functionality in Internet Explorer version 8 and below, via the ExplorerCanvas plugin.
Canvas dimensions
One key lesson that I learnt with canvas is that you have to explicitly set the width and height attributes of the canvas element when defining its dimensions. Using CSS to set the width and height will effectively cause the canvas to scale up (or down) to that size. There is a logical reason behind this; it’s to do with the canvas element being a container for something called the 2d rendering context. However, it’s just important to know that using CSS to set the canvas dimensions will have an odd effect.
Discovering the 2d Rendering Context
I mentioned in the last section that the canvas element is only one half of the story. The other half is the 2d rendering context; the part of canvas that lets you do the cool stuff that you can actually see.
Let me make one thing completely clear: when you use canvas, you’re not drawing on the canvas element itself. Instead, you’re actually drawing on the 2d rendering context, which you’re accessing through the canvas element via the JavaScript API. It doesn’t really matter in the grand scheme of things, but it’s useful to know.
Coordinate system
If you’ve used any 2d graphics programming languages before (ActionScript, Processing, etc), then you’ll know all about screen-based coordinate systems. The 2d rendering context in canvas is no different; it uses a standard Cartesian coordinate system, with the origin point (0, 0) at the top left. Moving to the right will increase the value of the x axis, while moving downward will increase the value of the y axis. It’s pretty straightforward.
One unit in the coordinate system is equal to one pixel on the screen (in the majority of cases).
Accessing the 2d rendering context
To actually use the 2d rendering context, you’ll need to use the JavaScript API. The part of the API that you want to use is the getContext method, like so:
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Note: you’re using jQuery here, but only for checking when the DOM is ready. Feel free to use your favorite JavaScript library instead, or place the code at the bottom of the document.
As a result of calling getContext, the ctx variable will now contain a reference to the 2d rendering context. This means that you now have everything in place to actually start drawing onto the canvas. The fun part!
Drawing Rectangles
Now that you have access to the 2d rendering context, you’re able to start calling the drawing methods of the API. One of the most basic is fillRect, which draws a rectangle that’s filled in a particular colour (black by default).
Add the following code underneath the ctx variable from earlier:
ctx.fillRect(50, 50, 100, 100);
This will draw a black square that is set slightly away from the left and top edges of the canvas, like so:
You’ve just drawn your first shape using HTML5 canvas. Feels good, right?
Note: You’ll notice that you’re using the rectangle method of the JavaScript API to draw squares. This is because there is no methods in canvas to draw squares directly, simple because squares are rectangles (they have four sides with right angles between them).
There are four arguments in a call to fillRect:
- The first is the x position of the origin point (the top left).
- The second is the y position of the origin point.
- The third is the width.
- And the forth is the height.
Written is pseudocode, fillRect would look like this:
ctx.fillRect(x, y, width, height);
The cool thing is that you’re not limited to just filled rectangles. Nope. You can also draw stroked rectangles; that is, rectangles with an outline around them. To to that you can use the strokeRect method of the JavaScript API, like so:
ctx.strokeRect(50, 50, 100, 100);
It uses exactly the same arguments as fillRect, and the result will be a lovely outline of a square:
Simple. Elegant. Easy. That really sums up canvas. All the methods are straightforward when looked at individually, but when used together they allow you to draw some pretty amazing things.
Drawing Paths
Aside from rectangles (the only shapes that can be drawn with a single API method), you have paths. Paths allow you to draw lines, both straight the curved, that can be combined to create quite complex shapes.
Drawing a simple path requires the use of a few new API methods:
beginPathstarts a new path.moveTomoves the point that the path is drawn from.lineTodraws a straight path to this point from the point defined in moveTo, or the point from the last call to lineTo.closePathcloses the path by connecting the last point to the starting point.fillfills the path with a colour.strokeoutlines the path.
Try the following code:
ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 250); ctx.lineTo(250, 250); ctx.closePath(); ctx.fill();
Which will draw a triangle path, and fill it:
You can use the same concept to draw any other shape that you want. The second article in this series will cover more advanced paths in canvas, like arcs (to create circles), and Bezier paths (to create cool curvy lines).
The important thing to remember right now is that paths are pretty much the only way to draw something more complicated than a rectangle.
Changing Colour
So far, everything that you’ve drawn has been filled or stroked in black. How exciting! Fortunately, there are a couple of properties within the JavaScript API that let you change the colour of the shapes that you’re drawing. These properties are fillStyle and strokeStyle.
They’re both pretty self explanatory, so let’s jump in and change the fill colour of a rectangle:
ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(50, 50, 100, 100);
This will give you a nice red square, like so:
Or, you could change the stoke colour of a rectangle:
ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeRect(50, 50, 100, 100);
Which will give you a square with a red outline:
The beauty of fillStyle and strokeStyle is that they both accept normal CSS colour values. That means you can use RGB, RGBA, HSA, colour words (eg. “red”), and hexadecimal values.
It’s worth pointing that changing the colour in canvas won’t affect anything that has already been drawn. For example, if you draw a black rectangle, then change the fill style to red, then draw another rectangle; the first rectangle will still be black.
Changing Line Width
Aside from changing colour, you can also change the width of a stroked outline. To do this you can use the lineWidth property of the JavaScript API.
Using the code from the previous example, you can change the width of the outline:
ctx.lineWidth = 20; ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeRect(50, 50, 100, 100);
Which will give you a beautiful and chunky red stroke:
The same concept works for paths as well. For example, you can change the triangle from earlier to have a thicker outline:
ctx.lineWidth = 20; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 250); ctx.lineTo(250, 250); ctx.closePath(); ctx.stroke();
Which will give you an incredibly exciting chunky triangle:
There are also some other features of the JavaScript API that let you change the way lines are drawn. For example, lineCap changes the way the end of a line looks, and lineJoin changes the way the corners in a line look. You should definitely check out these features (and more) in the canvas specification.
Erasing the Canvas
The last thing that I want to teach you is how to erase the canvas. You’ve learnt how to draw shapes, but not how to actually get rid of them, which can be pretty darn useful.
Fortunately, erasing the canvas is easy; you just need one method from the JavaScript API. That method is clearRect, and its job is to make every pixel within the rectangle transparent.
In this article, the canvas is 500 pixels wide, and 500 pixels tall, so you could easily erase the entire canvas by calling clearRect like so:
ctx.fillRect(50, 50, 100, 100); ctx.clearRect(0, 0, 500, 500);
There’s no use showing you a screenshot of this, because if it worked you should see absolutely nothing. The filled rectangle is actually being drawn, but it’s instantly being cleared afterward, so you don’t get to see it.
Note: The arguments in clearRect are the same as fillRect; x, y, width and height.
If you’re not sure of the width and height of the canvas, you can also erase it like so:
ctx.clearRect(0, 0, canvas.width, canvas.height);
This uses the width and height properties of the canvas element itself, which is incredibly useful and a much better way of doing things.
Erasing a small section of the canvas
You don’t have to erase the entire canvas if you don’t want to. You can quite easily erase just a small portion instead. For example, imagine you had a black square drawn next to a red square:
ctx.fillRect(50, 50, 100, 100); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(200, 50, 100, 100);
Which would normally look like this:
You could erase the black square and leave the red square intact by adding a call to clearRect underneath:
ctx.clearRect(50, 50, 100, 100);
Notice how this call to clearRect defines a position and size that is the same as the black square. This basically means that it will only change the pixels in the area of the square to transparent black (erasing them):
Pretty nifty, isn’t it? Erasing the canvas is not something that you’ll use much with static drawings, but it’s something that you’ll be using a lot of when you learn how to animate later in this series.
Wrapping Things Up
Canvas is easy to use, quick to learn, and dead powerful when you push it to the limits.
So, as I hope you can see, canvas is a particularly potent new part of the browser. It allows you to create graphics, using code, and without using a single plugin. It’s easy to use, it’s quick to learn, and it’s dead powerful when you push it to the limits.
In the next article, you’ll be looking at some of the more advanced features of canvas, like drawing circles, curved paths, and something called the drawing state. And if that isn’t enough, later on in the series you’ll be looking at how to transform drawings (like rotation and scale), how to manipulate images, and ending with a look at how to animate. It’s going to be very exciting stuff, trust me.
For now, I hope that I’ve given you enough to whet your appetite for canvas and to go out and learn more about it. Canvas is a fantastic technology that’s really worth understanding, even if you don’t plan to use it right away.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Rob Hawkes
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
All In One Banner–jQuery R ... only $8.00 
Simplicity - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This will be fun to follow! I hope the series gets into advanced apps and stuff!
I can see this is very powerful, however I am failing to see ways to implement canvas so far. Although I do realize that this article is only touching on the basics.
@Davidmoreen – I agree, I look forward to some more canvas articles. I really liked this one, it was easy to follow. I’d like to see some practical examples of using canvas so I can get my mind going on what to do with it.
So you can draw shapes…. Whats the point of that then? What use does that possibly have with the web?
For example, at Arsenal Report I’ll be using the canvas element to create our Interactive Pitch module v2, you can see an example here: http://www.arsenalreport.com/2011/02/arsenal-2-0-wolves/
Using the canvas element I’ll be able to move away from using images for the player icons.
That site is really cool. I like the way it is designed and the graphic are really cool, especially on the page you gave the link for.
Helps that I’m an Arsenal fan :)
Yes, I mean it’s not like the web has graphics, charts, images, games and interactive versions of all that…
Really, Good Introduction of Canvas element.
I’m looking forward to the rest too. My daughter suggested I look at Processing, but I really wanted to do something with canvass, and then here it was. Thanks!
Marcy, your daughter was right you should look at Processing. Learn canvas too. But Processing is a great tool for artists and designers who have little or no experience programming. It makes doing animations and expressive graphics easier and has built in functions to create complex images. There is also a javascript port of Processing by John Resig to use with the canvas element. So you can do both at once.
Very good tuts , waiting more about canvas from you
thank’s
Great stuff. Do you know if there’s a visual editor for stuff like that or something? I mean while with code some have total control over things, there’s a place for a visual editor isn’t?
There isn’t exactly a visual editor for canvas right now, but you can use svg graphics created in Illustrator, Inkscape or other visual environment.
Actually, there is a recently released GUI for creating motion graphics within the browser. It allows you to export as canvas and all sorts. I’ve not tried it much myself, but it’s worth checking out – http://radiapp.com/
I was avoiding this element every time i read about HTML5 but it’s really easy and so elegant, thanks ;)
I’m not too sure how and when I will need to draw shapes in the browser but I’ll be keeping an eye on the future tutorials and hope to learn a thing or two.
Can’t wait until everyone uses a modern browser, so HTML5 is just supported everywhere.
You can do such amazing things with HTML5, yet the browser support is still stopping me from putting a lot of time in it :-(.
Great series of tutorials though, I will probably keep following these.
Me too, I am a bit clueless on the moment on ways to make drawn elements useful for the web. However, while advancing in the series I’m pretty sure that there is going to be a good use for it. For example in the combination of drawing shapes and processing images.
For that matter I’m looking forward in reading the rest of the series!
Has anyone taken a serious stab at the accessibility problems that arise with canvas? Last I heard the W3C was exploring something like an image map, but that was a while ago.
Looking forward to the rest of this series for sure.
Q: Is it best to assume that anything that will be rotated, moved, manipulated, etc. within the canvas should be programmatically “drawn” while other items can be png’s?
I have been waiting for a beginner’s series on canvas for so long! :)
Thanks Rob. Great article.
Would it be possible to use clearRect() to erase paths drawn with lineTo ?
Let’s say I want to erase a straight line drawn in canvas’ diagonal ?
Yep, clearRect() can clear away paths. One thing that might have been useful to have seen an example of would be just a small portion of a rectangle or path punched out. All the examples dealing with clearRect() cleared an entire rectangle, or the entire screen.
Something like:
ctx.clearRect(75, 75, 50, 50);
to show a rectangle with a square punched out of the middle – might be a bit more of a concrete example of what it does.
Great tutorial though, can’t wait to see the rest of the series
Your comment about clearRect helped me! Thank you!!
This reminds me VRML.
http://en.wikipedia.org/wiki/VRML
And it is dead. so sad.
When I started playing around with Canvas for the first time a was somewhat shocked there is no way to set line-styles. A way to set dotted lines would’ve been very welcome.
@Matt: Do some animation. Draw some graphs even…
Great tutorial. HTML5 Canvas + jQuery is like using Raphael Javascript Library.
You can also erase a canvas by resetting its width or height.
Ah millions thanks! I’ve been waiting a good tut to start with canvas :D
I hope for a processingjs tutorial someday. XD
Thanks for the post! A great start!
Does .fillStyle also accept the rgba() format?
Also, is there a reason canvas is set up such that we have to access the 2d context via javascript? I don’t understand why the 2d context isn’t an implicitly understood property of the cavas element that initializes automatically when you include a canvas on the page. I know there is also a 3d context but I feel like it would have made more sense to structure the html like this:
<canvas context=”2d” width=”100″ height=”100″&rt;</canvas&rt;
This way you could specify your context right in the html. Is it that you might be switching contexts within a single canvas for some reason? Any insight?
Thanks a ton for this introduction to canvas, Was thinking to learn, will do for sure now !
Wow! great stuff i’ve really learnt something new today thanks. Hoping you guys are going to show some good ways of using this cause as cool as it is I dont see really what to use it for. But thanks anyway net tuts do love the articles!
Very good article. After looking the video i played around with IE8 to see what happens on an old browser…
So i found this solution working fine for me:
<pre name=”code” class=”html>
<canvas width=”500″ id=”myCanvas” height=”300″>
<img src=”http://ima.gs/fff/000/000/NoCanvasSupportWithThisBrowser-500×300.png”
alt=”Canvas is not supported with your browser”/>
</canvas>
</pre>
You can add canvas support to older IE browsers. Use ExplorerCanvas (aka excanvas). http://excanvas.sourceforge.net/
Thank you for this tutorial.
I hope to see a more advanced tutorial in the future.
Grtz !
I have been waiting for nettuts to do a tutorial on Canvas for quite a while! I’ll definitely be following this series.
Is there More? This was pretty awesome. In some ways reminds me of drawing with actionscript in flash.
Yep – new episodes to be released (roughly) biweekly.
Great introduction!
In a later stage, it would be nice to show how to use the canvas API with JS libraries like Raphaël.
I successfully integrated 2-3 graphs using the canvas method, it’s pretty awesome.
I’d like to see a tutorial on using canvas with graphs and data integration, that’d be cool.
Great tutorial! Waiting for the next series.
Great introduction. I like the way u know what mistakes people are going to make and add the into the video seemlessly. Great stuff.
I can’t get the js to pass.
I keep getting this error in firebug:
“canvas.getContext is not a function”
I’m using firefox5 on linux.
What could be happening here?
Which TM-Plugin you use for the autocomplete like canvas#myCanvas[width=500][height=300] ?
OK, i saw its not textmate :)
I just decided to give canvas a try and after reading this article I think its awesome!
Thanks a lot for the tutorial, I will keep reading the whole series.
How to get rid of arc, for example I draw 1 circle, then I want to draw another one in the same place, but bigger, then I need to erase the last circle and get my first 1 as is.