単一ピクセルのキャンバスを描画する

Question

5x5ブロックが実際に最終画像の1ピクセルであるキャンバスをズームしたり、変数onclickに格納された色でピクセルを「ペイント」する方法は可能ですか？私がテストしたコードはストロークに終わり、何らかの理由で何もしません。

Answer 1

これは何か？

<canvas id="canvas" style="width:100px; height:100px" width="5" height="5"></canvas> 

<script> 

    var canvas = document.getElementById("canvas"); 

    var context = canvas.getContext("2d"); 

    //Background 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 



    canvas.addEventListener("click", function(e) { 

     var x = Math.floor(e.x * canvas.width/parseInt(canvas.style.width)); 
     var y = Math.floor(e.y * canvas.height/parseInt(canvas.style.height)); 


     //Zoomed in red 'square' 
     context.fillStyle = "#F00"; 
     context.fillRect(x, y, 1, 1); 

    }, true); 

</script> 

編集：これはFF10に動作しますが、IEで動作しないいくつかの奇妙な理由でhttp://jsfiddle.net/Cmpde/