Skip to content

Instantly share code, notes, and snippets.

@pixlpa
pixlpa / draggablecanvasshapes.js
Last active August 29, 2015 13:57 — forked from anonymous/Draggable-Shapes.markdown
For each shape drawn into a canvas, an offscreen canvas is painted with the same shape, with the red color channel storing an ID. Shape click-testing is done by querying the color of the clicked position in the offscreen canvas. For UI with a lot of shapes (data viz for example) this is much more efficient than looping through and hit testing ba…
var canvas = document.getElementById('cvs'),
c = canvas.getContext('2d'),
ocan = document.createElement("canvas"),
oc = ocan.getContext('2d');
ocan.width=canvas.width;
ocan.height=canvas.height;
var offx = canvas.offsetLeft;
var offy = canvas.offsetTop;
var lastX = 0,lastY=0;
var active = 0;