What is Canvas?
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.
A canvas is a drawable region defined in HTML code with height and width attributes.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element.Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
Create a Canvas
A canvas is specified with the <canvas> element.Specify the id, width, and height of the <canvas> element:
| <canvas id="myCanvas" width="200" height="100"></canvas> |
Draw With JavaScript
The <canvas> element has no drawing abilities of its own.All drawing must be done inside a JavaScript:
| <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> |
| var c=document.getElementById("myCanvas"); |
| var ctx=c.getContext("2d"); |
The next two lines draws a red rectangle:
| ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); |
Understanding Coordinates
The fillRect property above had the parameters (0,0,150,75).This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).
The canvas' X and Y coordinates are used to position drawings on the canvas.
More Canvas Examples
Below are more examples of drawing on the <canvas> element:
Example - Line | Example - Circle |
Example - Gradient |
Example - Image |
HTML5 <canvas> Tag
| Tag | Description |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
HTML5 canvas.getContext("2d") reference
Description
The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This reference will cover the attributes and methods of the getContext("2d") object, which can be used to draw lines, boxes, circles, and more - on the canvas.
Colors and Styles
| Property | Value | Description |
|---|---|---|
| fillStyle | color gradient pattern |
Sets or returns the fill style of the drawing |
| strokeStyle | color gradient pattern |
Sets or returns the stroke style of the drawing |
| lineCap | butt round square |
Sets or returns the style of the ending of a line |
| lineJoin | bevel round miter |
Sets or returns the type of corner created, when two lines meet |
| lineWidth | number | Sets or returns the width of the stroke |
| miterLimit | number | Sets or returns the limit size of the corners in a line |
| shadowColor | color | Sets or returns the color of the shadow |
| shadowOffsetX | number | Sets or returns the horizontal distance of the shadow |
| shadowOffsetY | number | Sets or returns the vertical distance of the shadow |
| shadowBlur | number | Sets or returns the size of the blurring effect |
| Method | Description |
|---|---|
| createLinearGradient() | Creates a gradient object. Use this object as a value to the strokeStyle or fillStyle attributes |
| createPattern() | Creates a pattern from an image to be used by the fillStyle or strokeStyle attributes |
| createRadialGradient() | Creates a gradient object as a circle. Use this object as a value to the strokeStyle or fillStyle attributes |
| addColorStop() | Specifies the gradient's position and color |
| drawCustomFocusRing(element) | |
| drawSystemFocusRing(element) |
Path, Curve, Circle, and Rectangle
| Method | Description |
|---|---|
| fillRect(x,y,w,h) | Draws a filled rectangle using the color/style of the fillStyle attribute |
| strokeRect(x,y,w,h) | Draws the lines of a rectangle using the color/style of the strokeStyle attribute |
| clearRect(x,y,w,h) | Clears a rectangle area. All pixels inside this area will be erased |
| beginPath() | Starts a new path, or clears the current path |
| moveTo(x,y) | Moves the path to the specified point, without creating a line |
| closePath() | Creates a line (path) from the last point in the path, to the first point. Completes the path |
| lineTo(x,y) | Creates a line from the last point in the path to the given point |
| rect(x,y,w,h) | Creates a rectangle |
| fill() | Fills the current path with the selected color, black is default |
| stroke() | Creates a stroke/path described with the specified path methods |
| clip() | Creates an area in the canvas, and this area is the only visible area in the canvas |
| quadraticCurveTo(cpx,cpy,x,y) | Creates a quadratic Bezier curve from the current point in the path to the specified path |
| bezierCurveTo(cpx,cpy,cpx,cpy,x,y) | Creates a cubic Bezier curve from the current point in the path to the specified path |
| arc(x,y,r,sAngle,eAngle,aClockwise) | Creates a circle, or parts of a circle |
| arcTo(x1,y1,x2,y2,radius) | Creates an arc between two points |
| isPointInPath(x,y) | Returns a Boolean value, true if the specified point is in the path, otherwise false |
Transformations
| Method | Description |
|---|---|
| scale(x,y) | Scales the drawings based on the x and y parameters |
| rotate(angle) | Rotates the drawings based on the given angle |
| translate(x,y) | Moves the drawings horizontally and vertically |
| transform(a,b,c,d,e,f) | Changes the shape of the drawings based on a matrix |
| setTransform(a,b,c,d,e,f) | Clears the current transformation, then makes the changes of the drawings based on a matrix |
Text
| Property | Value | Description |
|---|---|---|
| font | fontproperties | Specifies font properties used for writing on the canvas |
| textAlign | start end left right center |
The alignment of the text, "start" is default |
| textBaseline | alphabetic bottom hanging ideographic middle top |
The vertical alignment of the text, "alphabetic" is default |
| Method | Description |
|---|---|
| fillText(text,x,y,maxWidth) | Draws text on the canvas, and fills it with the color set by the fillStyle attribute |
| strokeText(text,x,y,maxWidth) | Draws text on the canvas, without filling, using the color set by the strokeStyle attribute. |
| measureText(text).width | Measures the given text string, returns the result in pixels |
Images and Pixel Manipulation
| Property | Value | Description |
|---|---|---|
| width | number | Specifies the width of the imagedata object |
| height | number | Specifies the height of the imagedata object |
| data | array | An array containing the rgba values of all pixels in an imagedata object |
| Method | Description |
|---|---|
| drawImage() | Use a picture when drawing onto the canvas |
| createImageData() | Creates a blank imagedata object |
| getImageData(x,y,w,h) | Creates a new imagedata object, containing data from the canvas |
| putImageData(imgdat,dx,dy,x,y,w,h) | Draws imagedata onto the canvas |
Compositing
| Property | Value | Description |
|---|---|---|
| globalAlpha | number | Specifies the transparency of the drawings |
| globalCompositeOperation | source-atop source-in source-out source-over destination-atop destination-in destination-out destination-over lighter copy xor vendorName-operationName |
Specifies how shapes and drawings are positioned onto the canvas, source-over is default |
Previous Article
Responses
0 Respones to "HTML5 Canvas - What is Canvas?"
Post a Comment