The canvas object supports the standard properties and events.
The HTML5 <canvas> tag is used to draw graphics with javaScript.
We can access a <canvas> element by using getElementById().
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- ww w . ja v a 2 s. c o m-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
}
</script>
</body>
</html>
The code above is rendered as follows:
| addColorStop() | Position added colors in a gradient object |
| arc() | Creates circle part |
| arcTo() | Creates an curve between two tangents |
| beginPath() | Begins a path |
| bezierCurveTo() | Creates a cubic Bezier curve |
| clearRect() | Clears the given rectangle |
| clip() | Clips a region from the canvas |
| closePath() | Close a path by linking current point back to the starting point |
| createImageData() | Creates a new ImageData object |
| createLinearGradient() | Creates a linear gradient |
| createPattern() | Create a pattern for later use |
| createRadialGradient() | Creates a circular gradient |
| drawImage() | Draws an image, canvas, or video |
| fill() | Fills the path |
| fillRect() | Draws a filled rectangle |
| fillStyle | Sets or gets the color, gradient, or pattern |
| fillText() | Fill text on the canvas |
| font | Sets or gets the font properties |
| getImageData() | Get the ImageData object from canvas |
| globalAlpha | Sets or gets the current transparency value |
| globalCompositeOperation | Deal with the image overlap |
| ImageData | ImageData object returned from getImageData() |
| isPointInPath() | Check if the specified point is in the current path |
| lineCap | Sets or gets the style of the line ending caps |
| lineJoin | Sets or gets the type of line join |
| lineTo() | Adds a new point to create a line from that point to the last specified point |
| lineWidth | Sets or gets the current line width |
| measureText() | Calculate the width of the specified text |
| miterLimit | Sets or gets the maximum miter length |
| moveTo() | Move the drawing cursor |
| putImageData() | Put the image data from a ImageData object back to the canvas |
| quadraticCurveTo() | Create a quadratic Bezier curve |
| rect() | Create a rectangle |
| restore() | Popup saved state |
| rotate() | Rotate the current drawing |
| save() | Push drawing state |
| scale() | Make the drawing bigger or smaller |
| setTransform() | Set the transform to the identity matrix |
| shadowBlur | Sets or gets the blur level for shadows |
| shadowColor | Sets or gets the color for shadows |
| shadowOffsetX | Sets or gets the horizontal distance between the shadow and the shape |
| shadowOffsetY | Sets or gets the vertical distance between the shadow and the shape |
| stroke() | Draw the path defined |
| strokeRect() | Draws a rectangle with no fill |
| strokeStyle | Sets or gets the color, gradient, or pattern used for strokes |
| strokeText() | Draws text without filling |
| textAlign | Sets or gets the text alignment |
| textBaseline | Sets or gets the text baseline |
| toDataURL() | Encode canvas to URL |
| transform() | Set new the current transformation matrix |
| translate() | Reposition the (0,0) on the canvas |