1. Drawing tools
- Rectangles
- Arcs
- Paths and line drawing
- Bezier and quadratic curves
2. Effect
- Fills and strokes
- Shadows
- Linear and radial gradients
- Alpha transparency
- Compositing
3. Transforming
- Scaling
- Rotation
- Translation
- Transformation matrix
4. Receive external or internal data
- Loading external images by URL, other canvases or data URI
- Retrieving a PNG representation of the current canvas as a data URI
Browsers support canvas:
|
IE |
Firefox |
Chrome |
Safari |
Opera | |
|---|---|---|---|---|---|
|
3 versions back |
|
7.0 |
13.0 |
3.2 |
11.0 |
|
2 versions back |
|
8.0 |
14.0 |
4.0 |
11.1 |
|
Previous version |
|
9.0 |
15.0 |
5.0 |
11.5 |
|
Current |
9.0 |
10.0 |
16.0 |
5.1 |
11.6 |
|
Near future |
10.0 |
11.0 |
17.0 |
6.0 |
12.0 |
|
Farther future |
|
12.0 |
18.0 |
|
|
Simple tutorial with Canvas
1. Create canvas tag
In a website, canvas occupies a rectangular area whose size is defined by canvas itself. By default, canvas tag doesn’t have border & content. However, canvas tag always has ID & height, width attributes to define its size.
|
<canvas id="myCanvas" width="500" height="300">
<p>Your browser doesn't support canvas.</p> </canvas> |
1. Draw canvas with JavaScript
Drawing canvas has to be done in JavaScript Script. Let’s take an example with drawing Vietnam’s flag (red background with yellow star):
Step1: Draw a red rectangular
|
<script>
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,500,300); </script> |
Explanation:
|
var c=document.getElementById("myCanvas");
|
First, find <canvas> tag by its ID
|
var ctx=c.getContext("2d");
|
2D subject is built in HTML5 with many attributes & methods to assist drawing lines, boxes, texts, circles, images and much more.
|
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,500,300); |
In this example, our task is to draw a red rectangular. Attributes of fillStyle can be color (default is black), gradient or pattern. Function fillRect(x,y, height, width) draws a rectangular starting from coordinate(x,y) with defined height & width. Coordinates are set up within <canvas>.
Step 2: Draw yellow star
|
ctx.beginPath();
ctx.fillStyle = “yellow”; ctx.moveTo(250,80); ctx.lineTo(200,200); ctx.lineTo(320,125); ctx.lineTo(180,125); ctx.lineTo(300,200); ctx.closePath(); ctx.fill();
|
Idea: Define coordinates of 5 tipping point forming a star
Explain code:
|
ctx.beginPath();
|
Function beginPath() begins a new path. Before drawing a new line with different small paths, you have to use beginPath() to indicate a new starting point of the drawing’s direction.
|
ctx.closePath();
|
Create a path from current position to go back to starting point.
|
ctx.fillStyle = “yellow”;
|
Select yellow for star’s color
|
ctx.moveTo(250,80);
|
Function moveTo() indicates where a new path start without creating a new one.
This is the 1st tipping point of the star.
|
ctx.lineTo(200,200);
ctx.lineTo(320,125); ctx.lineTo(180,125); ctx.lineTo(300,200); |
Initiate a new point & create a line from it to the previously defined point. This is, in turn, the 4 tipping points of the star. Image these points with the correct order to create the lines – we’ll have the star shape.
Try with the first 3 tipping points to understand more clearly how canvas works with function lineTo().
|
ctx.beginPath();
ctx.fillStyle = "yellow"; ctx.moveTo(250,80); ctx.lineTo(200,200); ctx.lineTo(320,125); ctx.closePath(); ctx.fill(); |
The starting point has coordinate (250,80) in function moveTo(), and from this point we create a line to coordinate (200,200), and then from (200,20) create a lint to (320,125). Lastly, create a line from (320,125) to the starting point (250, 80). This is the result we have:
Do the same steps with other points so we’ll finish creating a star shape. The only thing left to do is filling color inside this star shape (with yellow color).
|
ctx.fill();
|
That's all for the example with canvas tutorial. Hope this article helpful for you. If you have any question or ideas on any topic you want us to write for you, you can leave us your comment below.
Be Sociable, Share!
Blog Author: Lien Berry
