I load the picture, turn it, and when I start to increase or decrease it returns to the state before turning. I want to return the coordinates to the point 0.0, because other elements will be drawn further

var img; var tttRotate = 0; var tttScale = 1; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); function draw() { var ctx = document.getElementById('canvas').getContext('2d'); img = new Image(); var f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { ctx.scale((canvas.width / img.width), (canvas.width / img.width)); ctx.drawImage(img, 0, 0, img.width, img.height); }; }; document.getElementById("uploadimage").addEventListener("change", draw, false) function Move(a) { switch (a) { case 'plus': if (tttScale < 1) { tttScale = 1; } tttScale = tttScale + 0.05; break; case 'mines': if (tttScale > 1) { tttScale = 1; } tttScale = tttScale - 0.05; break; default: tttScale = 1; } var ctx = document.getElementById('canvas').getContext('2d'); ctx.clearRect(0, 0, img.width, img.height); ctx.scale(tttScale, tttScale); ctx.drawImage(img, 0, 0, img.width, img.height); } function Rot() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); tttRotate += 90 / 57.2958; var x = img.width / 2; var y = img.width / 2; var width = img.width; var height = img.height; // ctx.clearRect(0, 0, width, height); ctx.translate(x, y); ctx.rotate(tttRotate); ctx.drawImage(img, -width / 2, -height / 2, width, height); ctx.rotate(-tttRotate); ctx.translate(-x, -y); ctx.restore(); } function doCanvas() { ctx.fillStyle = '#FF8F00'; ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = '#fff'; ctx.clearRect(0, 0, 500, 500); }; 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body onload="doCanvas()"> <input type="file" name="img" id="uploadimage"> <a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a> <a href="javascript:void(0)" onclick="Move('plus')">Plus</a> <a href="javascript:void(0)" onclick="Rot()">rot</a> </br> <canvas id="canvas" width="500" height="500" ;></canvas> <script src="config.js"></script> </body> </html>

    1 answer 1

    You redeclare img and ctx many times, respectively, for each function these are different objects. The code below works, but I advise you to move the repeating chunks into a separate function, for example imgProceed (img, ctx, scale, rotate), well, or as you prefer.

     var img; var tttRotate = 0; var tttScale = 1; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var x; var y; var width; var height; function draw() { ctx = document.getElementById('canvas').getContext('2d'); img = new Image(); var f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { ctx.scale((canvas.width / img.width), (canvas.width / img.width)); ctx.drawImage(img, 0, 0, img.width, img.height); }; }; document.getElementById("uploadimage").addEventListener("change", draw, false) function Move(a) { switch (a) { case 'plus': if (tttScale > 2) { tttScale = 1; } tttScale = tttScale + 0.05; break; case 'mines': if (tttScale < 0) { tttScale = 1; } tttScale = tttScale - 0.05; break; default: tttScale = 1; } ctx.save(); x = img.width / 2; y = img.width / 2; width = img.width; height = img.height; ctx.clearRect(0, 0, img.width, img.height); ctx.scale(tttScale, tttScale); ctx.translate(x, y); ctx.rotate(tttRotate); ctx.drawImage(img, -width / 2, -height / 2, width, height); ctx.restore(); } function Rot() { ctx.save(); tttRotate += 30 / 57.2958; x = img.width / 2; y = img.width / 2; width = img.width; height = img.height; ctx.clearRect(0, 0, width, height); ctx.scale(tttScale, tttScale); ctx.translate(x, y); ctx.rotate(tttRotate); ctx.drawImage(img, -width / 2, -height / 2, width, height); ctx.restore(); } function doCanvas() { ctx.fillStyle = '#FF8F00'; ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = '#fff'; ctx.clearRect(0, 0, 500, 500); }; 
     <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body onload="doCanvas()"> <input type="file" name="img" id="uploadimage"> <a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a> <a href="javascript:void(0)" onclick="Move('plus')">Plus</a> <a href="javascript:void(0)" onclick="Rot()">rot</a> </br> <canvas id="canvas" width="500" height="500" ;></canvas> <script src="config.js"></script> </body> </html>