You use
id=context.getImageData(x, y, w, h);
//id.data is an array of the format [r, g, b, a, r, g, b, a]
You then use context.putImageData(id, x, y);
I have applied this in places such as particle effects using canvas [where particles are 1x1 pixel large], my simple 3d render, color selector, etc.
Its helpful.
--- Update: Didn't realize you were asking about traversing DOM tree...
--- ------ The below code will find the DOM element that has been clicked. Note that for textnodes that are direct children of document.body, you must wrap a or some sort of container around them. This is because they don't have the exact same properties as element_nodes ... For your grid-like effect, it would be very easy to extend this. Once you get the hit object's x/y, you could do the drawing. By the way, for your situation, setting pixels one at a time probably isn't the best thing you can do. I suggest you look into context.fillStyle="#RRGGBB"; context.fillRect(x, y, w, h); which in your example, would be context.fillStyle="#0000FF"; context.fillRect(x, y, 100, 100); ...
<html>
<head>
<script>
function Rect(x, y, w, h)
{
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.hitTest = function(x, y)
{
if(this.x > x) return false; //If LEFT BORDER is right of x, fail
if(this.x + this.w < x) return false; //IF RIGHT BORDER is LEFT of x, fail
if(this.y > y) return false; //IF MY TOP IS BELOW y, fail
if(this.y + this.h < y) return false;//if my BOTTOM is above y, fail
return true;
}
};
//original: http://www.quirksmode.org/js/findpos.html
//Func was changed a little
function findPos(obj) {
var curleft = curtop = 0;
try
{
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
}catch(e){}; //Sometimes offset parent isn't Assumedined... so we just stop and return
return [curleft,curtop];
}
function findScreenPos(obj) {
var curleft = curtop = 0;
try
{
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop - obj.scrollTop;
} while (obj = obj.offsetParent);
}
}catch(e){}; //Sometimes offset parent isn't Assumedined... so we just stop and return
return [curleft,curtop];
}
findElementUnderMouseInNode = function(node)
{
//Note that this function excludes our canvas.
var cnl = node.childNodes.length;
for(var i = 0; i < cnl; i++)
{
var childNode = node.childNodes[i];
if((childNode.toString() != "[object Comment]") && (childNode != "[object Text]"))
{
{
var childNodePos = findScreenPos(childNode);
var pos = new Rect(childNodePos[0], childNodePos[1], childNode.offsetWidth, childNode.offsetHeight);
if(pos.hitTest(_xmouse, _ymouse))
{
var deeperNode = findElementUnderMouseInNode(childNode);
if(deeperNode == null)
return childNode;
else
return deeperNode;
}
}
}
}
return null;
};
window.onmousedown = function(e){
if(e.pageX)
{
_xmouse = e.pageX;
_ymouse = e.pageY;
}
else
{
if(typeof(event) == "undefined") return;
_xmouse = event.clientX + document.body.scrollLeft;
_ymouse = event.clientY + document.body.scrollTop;
}
var n = findElementUnderMouseInNode(document.body);
var mydiv = document.createElement("div");
mydiv.style.position = "absolute";
mydiv.style.left = findPos(n)[0] + "px";
mydiv.style.top = findPos(n)[1] + "px";
mydiv.style.width= n.offsetWidth + "px";
mydiv.style.height= n.offsetHeight + "px";
mydiv.style.border = "1px #FFFF00 solid";
mydiv.style.backgroundColor = "#FFFF00";
mydiv.style.opacity = 0.5;
document.body.appendChild(mydiv);
}
</script>
</head>
<body>
<span>asdf</span><br>
<img src="" width="100" height="100" />
<div>LOL</div>
asdf
</body>
</html>
Logic of the function:
The function gets the childnodes of an element.
If (the node is not a comment node or a text node) AND the child isn't your canvas
Search the node's childnodes [be more precise, select the element that is at the edge of the DOM tree, otherwise you might as well be saying "the user clicked the document.body"]
If the childNode has a childnode that was hit, return that, otherwise return yourself.