snappy-canvas

v0.5.1

Published

2 years ago

Canvas where everything is snapped to nearest pixel

Downloads

1,438

0High
0Medium
0Low

flozz

wanadmin

canvas browser

SnappyCanvas - Canvas where everything is snapped to nearest pixel

Snappy canvas is an HTML5 canvas that provides a "snappy" 2D context with an API similar to the standard 2D context but where everything is approximated to the nearest pixel: no more blurry drawings!

Snappy Context 2D vs Standard Context 2D

var canvas = new SnappyCanvas({
    width: 300,
    height: 300
});

var ctx = canvas.getContext("snappy");

ctx.strokeRect(10, 10, 50, 50);
ctx.fillRect(70, 10, 50, 50);

ctx.beginPath();
ctx.arc(35, 95, 25, Math.PI, 2.5 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(70, 95);
ctx.arcTo(120, 95, 120, 120, 25);
ctx.stroke();

ctx.render();

Live example on JSFiddle: https://jsfiddle.net/hq746L43/3/

SnappyCanvas API

Constructor

var canvas = new SnappyCanvas([options={}]) -> HTMLCanvasElement

options: Object -- The SnappyCanvas and SnappyContext2D options.

{
    // SnappyCanvas options
    width: <Number>,               // Width of the canvas HTML element
    height: <Number>,              // Height of the canvas HTML element
    contentWidth: <Number>,        // Width of the drawing at scale 1 (useful when autoResize = true)
    contentHeight: <Number>,       // Height of the drawing at scale 1 (useful when autoResize = true)

    // SnappyContext2D options
    globalScale: <Number>,         // Initial scale of the snappy context (default 1)
    globalTranslationX: <Number>,  // Initial x translation of the snappy context (default 0)
    globalTranslationY: <Number>,  // Initial y translation of the snappy context (default 0)
    scaleLineWidth: <Boolean>,     // If true, the snappy context will scale the line width according to scale (default true)
    scaleDashesWidth: <Boolean>,   // If true, the snappy context will scale the with of the dashes of dashed line according to scale (default true)
    autoResizeCanvas: <Boolean>    // Allow canvas to be resized when `SnappyContext2D.globalScale` changes
}

NOTE: The constructor returns a standard HTMLCanvasElement augmented with some additional properties.

SnappyCanvas.getContext()

canvas.getContext(contextType [, contextAttributes]) -> SnappyContext2D

Same as the standard HTMLCanvasElement.getContext() but with an additional contextType: "snappy".

Example:

var ctx = canvas.getContext("snappy");

SnappyCanvas.contentWidth

canvas.contentWidth = <Number>

Width of the drawing at scale 1 (useful when autoResize enabled).

SnappyCanvas.contentHeight

canvas.contentHeight = <Number>

Height of the drawing at scale 1 (useful when autoResize enabled).

SnappyContext2D

SnappyContext2D provides most of the standard CanvasRenderingContext2D and works almost the same.

The main differences between the standard context 2D and the snappy context 2D are:

the snappy context 2D does not draw anything when you call a drawing operation: it just stacks the operations and draws everything when you call the render() method.
you can change the global scale and translation of the snappy context at any time and everything will be automatically redrawn according to the new parameters (no need to repeat the operations yourself).

To access the snappy context, just request it from a SnappyCanvas:

var canvas = new SnappyCanvas();
var ctx = canvas.getContext("snappy");