Рисование одного пикселя с холстом

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>

Редактировать: Добавлена ​​функциональность клика

Демо: http://jsfiddle.net/Cmpde/