CODEWITHSUNDEEP
javascripthtmlcanvas
Your choice
Your choice

Reputation: 455

HTML5 canvas zoom my drawings

Hello i create program like a paint on HTML5 canvas. I have problem i need create few tools drawing and zoom. I don't have idea how to create zoom without delay. Drawing example: http://jsfiddle.net/x5rrvcr0/

How i can zooming my drawings?

drawing code:

    <style>
        canvas {
            background-color: #CECECE;
        }

        html, body {
            background-color: #FFFFFF;
        }
    </style>



<script>
    $(document).ready(function () {
        var paintCanvas = document.getElementById("paintCanvas");
        var paintCtx = paintCanvas.getContext("2d");

        var size = 500;

        paintCanvas.width = size;
        paintCanvas.height = size;

        var draw = false;
        var prevMouseX = 0;
        var prevMouseY = 0;

        function getMousePos(canvas, evt) {

            evt = evt.originalEvent || window.event || evt;
            var rect = canvas.getBoundingClientRect();


            if (evt.clientX !== undefined && evt.clientY !== undefined) {
                return {
                    x: evt.clientX - rect.left,
                    y: evt.clientY - rect.top
                };   
            }
        } 





        $("#paintCanvas").on("mousedown", function(e) {
            draw = true;
            var coords = getMousePos(paintCanvas);
            prevMouseX = coords.x;
            prevMouseY = coords.y;
        });

        $("#paintCanvas").on("mousemove", function(e) {
            if(draw) {
                var coords = getMousePos(paintCanvas, e);

                paintCtx.beginPath();
                paintCtx.lineWidth = 10;
                paintCtx.strokeStyle = "#000000";
                paintCtx.moveTo(prevMouseX, prevMouseY);
                paintCtx.lineTo(coords.x, coords.y);
                paintCtx.stroke();

                prevMouseX = coords.x;
                prevMouseY = coords.y;
            }
        });

        $("#paintCanvas").on("mouseup", function(e) {
            draw = false;
        });


    });
</script>



<body>
    <canvas id="paintCanvas"></canvas>
</body>

Upvotes: 0

Views: 5748

Answers (2)

GameAlchemist
GameAlchemist

Reputation: 19294

If you want to keep the pixelated effect in the zoom, you need to draw on a temp canvas, then only after copy that temp canvas to the main screen.
You no longer need to zoom in the temp canvas, just draw on 1:1 scale always. When copying to the view canvas, then you apply the zoom (and maybe translate) that you want.

Keep in mind that drawings are anti-aliased, so you when zooming you will see some shades of grey when drawing in black, for instance.

I kept the recording code of @FurqanZafar since it is a good idea to record things in case you want to perform undo : in that case just delete the last record entry and redraw everything.

http://jsfiddle.net/gamealchemist/x5rrvcr0/4/

function updatePaintCanvas() {
    paintContext.clearRect(0, 0, paintContext.canvas.width, paintContext.canvas.height);
    paintContext.save();
    paintContext.translate(cvSize * 0.5, cvSize * 0.5);
    paintContext.scale(scale, scale);
    paintContext.drawImage(drawCanvas, -cvSize * 0.5, -cvSize * 0.5);
    paintContext.restore();
}

Upvotes: 2

Furqan Zafar
Furqan Zafar

Reputation: 1481

Heres the updated fiddle: http://jsfiddle.net/x5rrvcr0/2/ with basic zooming functionality

If you draw multiple paths on mouse move then your sketch will appear broken or disconnected, instead you should only stroke a single path until "mouseup" event.

You can then store these paths in an array and later redraw them at different zoom levels:

    function zoom(context, paths, styles, scale) {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        context.save();
        applyStyles(context, styles);
        scaleFromCenter(context, scale);
        for (var i = 0; i < paths.length; i++) {
            context.beginPath();                
            context.moveTo(paths[i][0].x, paths[i][0].y);                
            for (var j = 1; j < paths[i].length; j++)
                context.lineTo(paths[i][j].x, paths[i][j].y);
            context.stroke();
        }
        context.restore();
    };

Upvotes: 2

Related Questions