cv.js
A lightweight Canvas JavaScript library.
//Initialize the canvas elementvar canvas = id: 'my-canvas' width: 300 height: 300 ; //Draw a new arccanvas; //Set background colorcanvas;
Download
- Download the latest release: download.
- Using NPM:
npm install cvjs
. - Using bower:
bower install cvjs
.
Usage
Add to your website:
Initialize your canvas element with:
var canvas = id: 'your-canvas-id' width: 300 height: 300 ;
The argument must be an object with the next keys:
id
: ID of your canvas element (mandatory).width
: width dimension of your canvas (in pixels) (mandatory).height
: height dimension of your canvas (in pixels) (mandatory).
Width(w)
Use this function for set the width of your canvas element. If no argument is provided, the function returns the actual canvas width.
//Set the canvas width to 500pxcanvas; //Get the canvas widthvar width = canvas; //now width is 500
Height(h)
Use this function for set the height of your canvas element. If no argument is provided, the function return the actual canvas height.
//Set the canvas height to 600pxcanvas; //Get the canvas heightvar height = canvas; //Now height is 600
Clear(object)
Clear a rectangle of your canvas. The argument must be an object with the next keys:
x
: position x of your rectangle.y
: position y of your rectangle.width
: rectangle width.height
: rectangle height.
If no argument is provided, the function will clear all the canvas.
//Clear only a rectanglecanvas; //Clear all the canvascanvas;
Fill(object)
Sets the color used to fill the drawing. The argument can be an object with the following keys:
color
: a color value that indicates the fill color.opacity
: sets the transparency of the fill.
//Set the fill of the objectcanvas;
The Fill
method also works with a string argument:
//Set only the fill colorcanvas;
Stroke(object)
The Stroke
method draws the path that you have previous defined. The argument can be an object with the following keys:
color
: color value for the line.width
: sets the line width.cap
: sets the cap end style for the lines. Available values:butt
,round
orsquare
.join
: sets the corner style. Available values:bevel
,round
ormiter
.opacity
: sets the transparency value of the line.
//Set the stroke stylecanvas;
Also, the Stroke
method allows a string argument for set only the stroke color:
//Set only the stroke colorcanvas;
Rect(object)
Draws a rectangle defined by:
x
: x position of the rectangle.y
: y position of the rectangle.width
: rectangle width.height
: rectangle height.radius
: sets the corner radius of the rectangle (optional).
//Draw a normal rectanglecanvas; //Fill the normal rectanglecanvas; //Draw a rounded rectanglecanvas; //Fill the rounded rectanglecanvas;
Line(points)
Draws a line defined by an array of points.
//Draw a single linecanvas; //Set the stroke of the single linecanvas; //Draw five connected linescanvas; //Set the stroke of the five linescanvas;
Polygon(points)
Draws a polygon defined by an array of points.
//Draw a trianglecanvas; //Fill the frianglecanvas;
Arc(object)
Draws an arc or curve. The argument must be an object with the following keys:
x
: x-position of the arc center.y
: y-position of the arc center.radius
: arc radius.start
: start angle of the arc, in radians.end
: end angle of the arc, in radians.dir
: sets the direction of the arc (optional).1
indicates clockwise (default), and-1
indicates counter-clockwise.
//Draw a new arccanvas; //Arc fillcanvas;
Circle(object)
Draws a full circle defined by:
x
: x-position of the circle center.y
: y-position of the circle center.radius
: circle radius.
//Draw a circlecanvas; //Fill the circlecanvas;
Text(object)
Draws a text on the canvas. The argument of this method must be an object with the following keys:
text
: text to be written on the canvas.color
: text color.x
: x-position of the text.y
: y-position of the text.font
: text font. Default isArial
.size
: text size in pixels. Default is16px
.base
: sets the text baseline. Available values:alphabetic
,top
,hanging
,middle
,ideographic
orbottom
. Default isalphabetic
.align
: sets the text align. Available values:center
,end
,left
,right
orstart
. Default isstart
.mwidth
: sets the maximum allowed width of the text in pixels (optional).opacity
: sets the transparency of the text.
//Draw Hello Worldcanvas;
Image(object)
Draws an image on the canvas. You must provide the next information:
img
: sets the image for draw.x
: x-position of the image.y
: y-position of the image.width
: image width (optional, default is the image original width).height
: image height (optiona, default is the image original height).rotate
: rotation angle for the image, in radians (optional).opacity
: sets the transparency of the image.
//Draw an imagecanvas;
Draw on the canvas directly
You can use the ctx
method provided for draw directly on the canvas using the canvas API (see http://www.w3schools.com/tags/ref_canvas.asp for get more info). This allows you to use moveTo()
, quadraticCurveTo()
, bezierCurveTo()
, and more!
//Initialize the canvasvar canvas = id: 'my-canvas' width: 500 height: 500 ; //Move to our new pointcanvasctx; //Draw a quadratic curvecanvasctx;
Contribute
Pull requests are always welcome :)