scratchcard/lib/painter.js

Mimic a scratchcard with HTML5

/* jshint browserify: true */

'use strict';

var defaults = require('lodash.defaults');

module.exports = exports = Painter;

var defaultOptions = {
	color: 'silver',
	thickness: 50
};

function Painter(options) {
	this.options = defaults({}, options, defaultOptions);
}

Painter.prototype.reset = function reset(ctx, width, height) {
	ctx.fillStyle = this.options.color;
	ctx.globalCompositeOperation = 'source-over';

	ctx.fillRect(0, 0, width, height);
};

Painter.prototype.drawPoint = function drawPoint(ctx, point) {
	ctx.fillStyle = 'rgba(0,0,0,1)';
	ctx.globalCompositeOperation = 'destination-out';

	ctx.beginPath();
	ctx.arc(point.x, point.y, this.options.thickness / 2, 0, 2 * Math.PI);
	ctx.fill();
};

Painter.prototype.drawLine = function drawLine(ctx, start, end) {
	ctx.lineWidth = this.options.thickness;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'round';
	ctx.strokeStyle = 'rgba(0,0,0,1)';
	ctx.globalCompositeOperation = 'destination-out';

	ctx.beginPath();
	ctx.moveTo(start.x, start.y);
	ctx.lineTo(end.x, end.y);
	ctx.stroke();
};

Painter.prototype.complete = function complete(ctx, width, height) {
	ctx.fillStyle = 'rgba(0,0,0,1)';
	ctx.globalCompositeOperation = 'destination-out';

	ctx.fillRect(0, 0, width, height);
};

Painter.prototype.drawLayer = function drawLayer(ctx, width, height, index) {};