Html canvas element gives us interface to draw onto the some area of webpage by using Javascript scripting language. We can draw both vector and bitmap graphics. Below there is a list of all or nearly all available methods and attributes and their short description. To draw something first we must obtain reference to cnavas element and next take from it its drawing context. The most simple example of drawing is presented below:
function draw_rects() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }
| fillRect(x,y,width,height): | Draws filled rectangle |
| strokeRect(x,y,width,height): | Draws border of rectangle |
| clearRect(x,y,width,height): | Clears fragment of canvas area |
| beginPath(): | Begins drawing the path |
| closePath(): | Ends drawing the path |
| stroke(): | Draw line along the path |
| fill(): | Fills the path with color |
| moveTo(x, y): | Moves current drawing point to new location |
| lineTo(x, y): | Draws the line from current to specified location |
| arc(x, y, radius, startAngle, endAngle, anticlockwise): | Draws arc with specified parameters |
| quadraticCurveTo(cp1x, cp1y, x, y): | Draws a curve with specified parameters |
| bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): | Draws Beziera curve with specified parameters |
| rect(x, y, width, height): | Adds rectangular path to the current one |
| drawImage(image, x, y): | Draws image onto the canvas. The image may be: existing image (document.getElementById('img_id'), image created on the fly: new Image('/url/of/image'), other canvas element: document.getElementById('other_canvas_id') |
| drawImage(image, x, y, width, height): | Draws scaled image onto the canvas |
| drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): | Draws scaled image or its fragment onto the canvas |
| ctx.mozImageSmoothingEnabled = false; | Gecko 1.9.2 introduced attribute mozImageSmoothingEnabled of canvas element. If it is false, then scaled images will not be smoothed during scaling. By default the attribute it is true. |
| ctx.fillStyle = color: | Set fill color, ex: "orange", "#FFA500", "rgb(255,165,0)" or "rgba(255,165,0,1)" |
| ctx.strokeStyle = color: | Set border color |
| ctx.globalAlpha = transparency: | Set global transparency (it is applied to all newly drawed items). Its value is from 0.0 (full transparency) to 1.0 (full opaque) |
| ctx.lineWidth = value: | Set border line width |
| ctx.lineCap = type: | Sets type of beginning and ending of the line |
| ctx.lineJoin = type: | Sets type of joining points for lines in path |
| ctx.miterLimit = value: | |
| var gradient = createLinearGradient(x1,y1,x2,y2): | Creates linear gradient at specified coordinates |
| var gradient = createRadialGradient(x1,y1,r1,x2,y2,r2): | Creates radial gradient at specified coordinates |
| gradient.addColorStop(position, color): | Adds to the gradient stop-point with specified color |
| var pattern = createPattern(image,type): | Makes the pattern of the image |
| shadowOffsetX = float: | Sets x-offset for the shadow of all new shapes |
| shadowOffsetY = float: | Sets y-offset for the shadow of all new shapes |
| shadowBlur = float: | Sets blur factor for the shadow of all new shapes |
| shadowColor = color: | Sets the shadow color |
| fillText(text,x,y): | Draws text onto the canvas |
| save(): | Saves current canvas state onto the stack |
| restore(): | Pick from the stack canvas state and restores it |
| translate(x, y): | Make translation of the canvas with specified vector |
| rotate(angle): | Rotate canvas with specified angle |
| scale(x, y): | Scales canvas at x and y dimension with specified scaling factors |
| translate(0,canvas.height); scale(1,-1): | After calling this two instructions we obtain well known Cartesian coordinating system (with origin in left bottom point) |
| transform(m11, m12, m21, m22, dx, dy): | Make the canvas tranformation with specified transform matrix |
| setTransform(m11, m12, m21, m22, dx, dy): | |
| globalCompositeOperation = type: | Sets the mode of drawing shapes that have common (intersected) areas |
| clip(): | Sets clipping area for drawing. If some part of drawed shape is outside the area, then it is not drawed. |