Documentation

Learn all about jCanvas

jCanvas

• Introduction
• Syntax
• jCanvas Object
• Extending jCanvas
• Properties
• Methods

Canvas

• Clear Canvas
• Rotate Canvas
• Scale Canvas
• Translate Canvas
• Pixel Manipulation
• Get Canvas Image
• Draw Manually
• Detect Pixel Ratio

Drawings

• Arcs
• Arrows
• Curves
• Ellipses
• Images
• Lines
• Masking
• Paths
• Polygons
• Rectangles
• Slices
• Text
• Vectors

Layers

• Layer API
• Adding layers
• Retrieving layers
• Drawing layers
• Manipulating Layers
• Animating layers

Events

• Event API
• Mouse Events
• Mechanical Events
• Event Properties
• Draggable Layers
• Touch Events
• Event Hooks

Styles

• Colors
• Shadows
• Gradients
• Patterns
• Functions

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.

Creating a canvas

Before you can draw on the canvas, you need to create one.

<canvas width="300" height="150"></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).

As a side note, you cannot accurately set a canvas’s width and height via CSS; you can only do so through the canvas element’s width and height attributes.

Importing jCanvas

You also need to add jCanvas to your page somehow (usually a <script> element will do).

<script src="jcanvas.min.js"></script>

If your application is bundled or uses ES Modules (ESM), you can import jCanvas like so (remember to npm install jcanvas first!):

import $ from 'jquery';
import 'jcanvas';

Drawing

HTML5 provides a native JavaScript API for drawing on the canvas. However, we will be using jCanvas instead.

Using jCanvas requires basic knowledge of using jQuery.

Learn the jCanvas syntax