Canvas is part of the HTML5 API and allows to draw shapes and images on a html site. The API also contains the ability to create animations. The following browsers are supported:
- Mozilla Firefox > 3.5
- Opera >9
- Internet Explorer >9
- Chrome > 4
- Safari > 4
- iOS Safari > 3.2
- Opera Mobile > 10
- Android Chrome > 2.1 (Eclair)
....................................................................................................................................................................
Implmenting the Canvas Element
The implementation of the canvas element is very simple. With "width" and "height" the size of the canvas element is determined, but the size also can be determined with Javascript, which is shown in the next step.
With javascript also the support of the canvas tag can be checked, which is a more elegant solution than the html one. Here is the code (true and false are returned):
Now the canvas element is created, but to draw on it, the 2D- Context is needed, which can be fetched with the "getContext('2D')" instruction, as shown below:
To prevent that the Internet Explorer 9 jumps into the compatible mode ( where canvas isn't supported), you can enter this meta tag, which specify that the newest mode is used, into your html file:
....................................................................................................................................................................Drawing Shapes
On the canvas element various shapes can be drawn with some instructions:
On the canvas element various shapes can be drawn with some instructions:
- fillRect(x,y,w,h) ......With this instruction a filled rectangle is drawn.
- x...... X- Position
- y...... Y- Position
- w..... Width of the filled rectangle
- h...... Height of the filled rectangle
- Draw a simple Line
- beginPath() .... Indicates the beginn of a path
- moveto(x1,y1) ..... With this instruction the start point is moved from 0,0 to x1,y1
- lineto(x2,y2) ...... A imaginary line from the start point to x2,y2 is drawn
- closePath() ....... Indicates the end of a path
- stroke() ..... The imaginary line is visualised as a stroke
- Draw a simple circle
- beginPath()
- arc(x,y,r,sa,ea,w)
- x , y , r ....... X- Postion / Y- Position / Circle Radios
- sa , ea ..... Determine the Startangle / Endangle
- w ....... true = clockwise , false = counterclockwise
- closePath()
- fill() ...... The imaginary circle is filled
- stroke() ..... The imaginary cirlce is drawn unfilled
With these instructions you can draw all shapes you want. Here is a example of a Smiley:
....................................................................................................................................................................
Style the Shapes
With the canvas element also the style (width, color, and so on) can be changed. This is possible with the following instrcutions:
....................................................................................................................................................................
Style the Shapes
With the canvas element also the style (width, color, and so on) can be changed. This is possible with the following instrcutions:
- context.fillStyle = Color ........ Changes the filled color
- "rgba(r,g,b,a)"
- r,g,b .... Color values from 0 to 255
- a ..... Value of the transparency from 0 to1
- "rgb(r,g,b)"
- r,g,b .... Color values from 0 to 255
- context.strokeStyle = Color ....... Changes the stroke color
- the same as above
- context.lineWidth = Integer ........ Changes the stroke width to the integer value
Here is a example code:
....................................................................................................................................................................Transfer the coordinate system
Sometimes it is necessary to move the coordinate system from the upper left corner to an other position or to rotate it. If you want to draw a lopsided rectangle, for example. These are the instructions:
....................................................................................................................................................................Sometimes it is necessary to move the coordinate system from the upper left corner to an other position or to rotate it. If you want to draw a lopsided rectangle, for example. These are the instructions:
- rotate(angel) ............. Turns the coordinate system by the angel in a clockwise direction
- angel .......... The rotation angel specified in radians (2 PI = 360°)
- translate(x,y) ............... Transfer the coordinate system 0,0 position to a other.
- x,y .......... The new position of 0,0
Here is short example of a lopsided rectangel, below it is also used for the clock:
Draw Images
The canvas element also contain the ability to draw Images and manipulate them. These are the instructions to do this:
The ImageData instruction can cause problems, if you develop your html site local without a runnable server or the image is stored on an other webserver (crossdomain), because of a security exception.To develop it localy on your desktop you can start Google Chrome with an extension:
If you want to host your project on a webserver the image should be better on the same host as the Javascript. If it isn't possible , here is a workaround for Mozilla Firefox:
Canvas also contain the ability to draw Text on a html site. Here a the most important instructions:
Save and Restore
The canvas element also contain the ability to draw Images and manipulate them. These are the instructions to do this:
- drawImage(imgs,x,y)
- imgs .......... Javascript Image Variable
- x,y ............ X-, Y- Position of the Image
- drawImage(imgs,x,y,w,h)
- imgs .......... Javascript Image Variable
- x,y ............ X-, Y- Position of the Image
- w,h ........... Width/Height of the Image, will be scaled
- getImageData(x1,y2,x2,y2)
- x1,y2,x2,y2 ...... Defines the area of the Canvas, from which the ImageData should be fetched
- With the ImageData various things can be done
Here is a example, where a Image is turned into grayscale: View it on the demo page ("Draw Image")
If you want to host your project on a webserver the image should be better on the same host as the Javascript. If it isn't possible , here is a workaround for Mozilla Firefox:
....................................................................................................................................................................
Drawing TextCanvas also contain the ability to draw Text on a html site. Here a the most important instructions:
- fillText(Text,x,y,mw) .......... Draws a text on the Canvas element
- Text ......... The Text , which should be drawn.
- x,y ............ X-, Y- Position of the text
- mw........... (Optional) Maximal Width of the Text
- context.font = Font ............. Changes the font
- Font = " type size font"
- type ........ Font property f.e. Bold or Italic
- size ......... Text size (px)
- font ......... Font f.e. Sans-Serif or Arial
Save and Restore
Save() is a helpfull instruction for saving the actual style and font properties, as well as the coordinate system position and direction. Then you can change this properties and if you need the old ones, you dont have to change them back, you can only call restore(). Here is a short example:
....................................................................................................................................................................
Simple Animations
With the JavaScript Time functions and the Canvas clearRect() instruction, animations are possible.
Here is the source code of the analog clock:
....................................................................................................................................................................
....................................................................................................................................................................
Simple Animations
With the JavaScript Time functions and the Canvas clearRect() instruction, animations are possible.
- setInterval(function,time) ............. JavaScript Time Function
- function ........... Function ,which should be repeated.
- time ................. The sleep time (ms) until the function is repeated
- clearRect(x1,y2,x2,y2) .................... Clears the Canvas Element
- x1,y2,x2,y2 ........ The area, which should be cleared.
Here is the source code of the analog clock:
....................................................................................................................................................................
Categories:
