new jSketch()
A simple JavaScript library for drawing facilities on HTML5 canvas. This class is mostly a wrapper for the HTML5 canvas API with some syntactic sugar, such as function chainability and old-school AS3-like notation.
- Version:
- 1.1
- License:
- MIT license
- Source:
Example
var canvas1 = document.getElementById('foo');
var canvas2 = document.getElementById('bar');
// Instantiate once, reuse everywhere.
var brush = new jSketch(canvas1).lineStyle('red').moveTo(50,50).lineTo(10,10).stroke();
// Actually, `.moveTo(50,50).lineTo(10,10)` can be just `.line(50,50, 10,10)`.
// Switching between contexts removes the need of having to reinstantiate the jSketch class.
brush.setContext(canvas2).beginFill('#5F7').fillCircle(30,30,8).endFill();Methods
(static) background(color) → {object}
Sets the background color of canvas.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
An HTML color. |
Returns:
- Type:
-
object
jSketch
(static) beginFill(color) → {object}
Sets the fill color.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
An HTML color. |
Returns:
- Type:
-
object
jSketch
(static) beginPath() → {object}
A path is started.
- Source:
Returns:
- Type:
-
object
jSketch
(static) circle(x, y, radius) → {object}
Draws a filled+stroked circle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
radius |
number
|
Circle radius. |
Returns:
- Type:
-
object
jSketch
(static) clear() → {object}
Clears stage.
- Source:
Returns:
- Type:
-
object
jSketch
(static) closePath() → {object}
A path is finished.
- Source:
Returns:
- Type:
-
object
jSketch
(static) curve(x1, y1, x2, y2, cpx, cpy) → {object}
Draws curve from coordinate 1 to coordinate 2.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x1 |
number
|
Horizontal coordinate of point 1. |
y1 |
number
|
Vertical coordinate of point 1. |
x2 |
number
|
Horizontal coordinate of point 2. |
y2 |
number
|
Vertical coordinate of point 2. |
cpx |
number
|
Horizontal coordinate of control point. |
cpy |
number
|
Vertical coordinate of control point. |
Returns:
- Type:
-
object
jSketch
(static) curveTo(x, y, cpx, cpy) → {object}
Draws curve to given coordinate.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
cpx |
number
|
Horizontal coordinate of control point. |
cpy |
number
|
Vertical coordinate of control point. |
Returns:
- Type:
-
object
jSketch
(static) drawImage(src, xopt, yopt) → {object}
Draws an image.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
src |
string
|
Image source path. |
|
x |
number
|
<optional> |
Horizontal coordinate. |
y |
number
|
<optional> |
Vertical coordinate. |
Returns:
- Type:
-
object
jSketch
(static) endFill() → {object}
Recovers the fill color that was set before beginFill().
- Source:
Returns:
- Type:
-
object
jSketch
(static) eraser() → {object}
Sets brush to eraser mode.
- Source:
Returns:
- Type:
-
object
jSketch
(static) fillCircle(x, y, radius) → {object}
Draws a filled circle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
radius |
number
|
Circle radius. |
Returns:
- Type:
-
object
jSketch
(static) fillRect(x, y, width, height) → {object}
Draws a filled rectangle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
width |
number
|
Rectangle width. |
height |
number
|
Rectangle height. |
Returns:
- Type:
-
object
jSketch
(static) line(x1, y1, x2, y2) → {object}
Draws line from point 1 to point 2.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x1 |
number
|
Horizontal coordinate of point 1. |
y1 |
number
|
Vertical coordinate of point 1. |
x2 |
number
|
Horizontal coordinate of point 2. |
y2 |
number
|
Vertical coordinate of point 2. |
Returns:
- Type:
-
object
jSketch
(static) lineStyle(color, thickness, capStyle, joinStyle, miter) → {object}
Sets the line style.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
An HTML color. |
thickness |
number
|
Line thickness. |
capStyle |
string
|
Style of line cap. |
joinStyle |
string
|
Style of line join. |
miter |
string
|
Style of line miter. Only works if capStyle is "miter". |
Returns:
- Type:
-
object
jSketch
(static) lineTo(x, y) → {object}
Draws line to given coordinate.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
Returns:
- Type:
-
object
jSketch
(static) moveTo(x, y) → {object}
Move brush to a coordinate in canvas.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
Returns:
- Type:
-
object
jSketch
(static) pencil() → {object}
Sets brush to pencil mode.
- Source:
Returns:
- Type:
-
object
jSketch
(static) rect(x, y, width, height) → {object}
Draws a filled+stroked rectangle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
width |
number
|
Rectangle width. |
height |
number
|
Rectangle height. |
Returns:
- Type:
-
object
jSketch
(static) restore() → {object}
Restores previous drawing state.
- Source:
Returns:
- Type:
-
object
jSketch
(static) restoreGraphics() → {object}
Restores given drawing settings.
- Source:
Returns:
- Type:
-
object
jSketch
(static) save() → {object}
Saves a snapshot of all styles and transformations.
- Source:
Returns:
- Type:
-
object
jSketch
(static) saveGraphics(optionsopt) → {object}
Saves given drawing settings.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
options |
object
|
<optional> |
Graphics options. |
Returns:
- Type:
-
object
jSketch
(static) setContext(elem) → {object}
Allows to change the drawing context at runtime.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
elem |
object
|
DOM element. |
Returns:
- Type:
-
object
jSketch
(static) setDefaults() → {object}
Sets drawing defaults:
- fillStyle: Fill style color ('#F00').
- strokeStyle: Stroke style color ('#F0F').
- lineWidth: Line width (2).
- lineCap: Line cap ('round').
- lineJoin: Line join ('round').
- miterLimit: Line miter (10). Works only if the lineJoin attribute is "miter".
- Source:
Returns:
- Type:
-
object
jSketch
(static) size(width, height) → {object}
Sets the dimensions of canvas.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number
|
New canvas width. |
height |
number
|
New canvas width. |
Returns:
- Type:
-
object
jSketch
(static) stage(width, height, bgcolor) → {object}
Shortcut for setting the size + background color.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number
|
New canvas width. |
height |
number
|
New canvas width. |
bgcolor |
string
|
An HTML color. |
Returns:
- Type:
-
object
jSketch
(static) stroke() → {object}
Strokes a given path.
- Source:
Returns:
- Type:
-
object
jSketch
(static) strokeCircle(x, y, radius) → {object}
Draws a stroke-only circle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
radius |
number
|
Circle radius. |
Returns:
- Type:
-
object
jSketch
(static) strokeRect(x, y, width, height) → {object}
Draws a stroke-only rectangle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number
|
Horizontal coordinate. |
y |
number
|
Vertical coordinate. |
width |
number
|
Rectangle width. |
height |
number
|
Rectangle height. |
Returns:
- Type:
-
object
jSketch
