Skip to content

Instantly share code, notes, and snippets.

@seanoshea

seanoshea/canvas_impossible

Created June 30, 2011 23:45
Show Gist options
  • Save seanoshea/1057565 to your computer and use it in GitHub Desktop.
Save seanoshea/1057565 to your computer and use it in GitHub Desktop.
Download ZIP
Is this possible with Canvas
Raw
canvas_impossible
<!doctype>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<style>
#page {
width:100%;
height:100%;
background:#2B2B2B;
}
</style>
<script>
var myCanvas;
function createCanvasOverlay() {
var canvasContainer = document.createElement('div');
document.body.appendChild(canvasContainer);
canvasContainer.style.position="absolute";
canvasContainer.style.left="0px";
canvasContainer.style.top="0px";
canvasContainer.style.width="100%";
canvasContainer.style.height="100%";
canvasContainer.style.zIndex="1000";
myCanvas = document.createElement('canvas');
myCanvas.style.width = canvasContainer.scrollWidth+"px";
myCanvas.style.height = canvasContainer.scrollHeight+"px";
myCanvas.width=canvasContainer.scrollWidth;
myCanvas.height=canvasContainer.scrollHeight;
myCanvas.style.overflow = 'visible';
myCanvas.style.position = 'absolute';
canvasContainer.appendChild(myCanvas);
}
dojo.addOnLoad(function() {
createCanvasOverlay();
var context = myCanvas.getContext('2d'), started = false, startX, startY;
function onMouseMoveOnMyCanvas(evt) {
if (started) {
var x = Math.min(evt.layerX, startX),
y = Math.min(evt.layerY, startY),
w = Math.abs(evt.layerX - startX),
h = Math.abs(evt.layerY - startY);
context.clearRect(0, 0, myCanvas.width, myCanvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
}
}
function onMouseDownOnMyCanvas(evt) {
started = true;
startX = evt.layerX;
startY = evt.layerY;
}
function onMouseUpOnMyCanvas() {
started = false;
}
dojo.byId("myCanvas").parentNode.addEventListener('mousemove', onMouseMoveOnMyCanvas, false);
dojo.byId("myCanvas").parentNode.addEventListener('mouseup', onMouseUpOnMyCanvas, false);
dojo.byId("myCanvas").parentNode.addEventListener('mousedown', onMouseDownOnMyCanvas, false);
});
dojo.addOnLoad(function() {
dojo.connect(dojo.byId('page'), 'onclick', function() {
// if I'm not drawing a canvas rectangle, I'd like click events
// on the canvas element to propagate through to the 'page' dom node
console.warn('got a click');
});
dojo.connect(dojo.byId('myButton'), 'onclick', function() {
console.warn('got a click');
});
})
</script>
</head>
<body>
<div id="page">
<button id="myButton">I'm a button - click me</button>
</div>
<div id="myCanvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment