jCanvas
Canvas
- Clear Canvas
- Translate Canvas
- Rotate Canvas
- Scale Canvas
- Save Canvas
- Restore Canvas
- Pixel Manipulation
- Get Canvas Image
- Draw Manually
Drawings
Layers
Styles
Documentation
Click a code snippet to see a demo
Introduction
The <canvas> element is a new element apart of HTML5. It allows you to draw shapes, paths, images, and other drawings on a blank element called the canvas.
Setup
Before you can draw on the canvas, you need to create one.
<canvas width="500" height="250"></canvas>
Of course, the canvas can be any width/height you want. You may also wish to give the canvas an ID (for future reference).
You also need to add jCanvas to your page somehow (usually a <script> will do).
<script src="jcanvas.min.js"></script>
Drawing
HTML5 provides a JavaScript API for drawing on the canvas. However, we will be using jCanvas instead.
Using jCanvas requires basic knowledge of using jQuery.