you need to rotate the image by the button, I kind of wrote everything correctly, but it is erased for some reason

var img; var tttAlt = 0; var tttLong = 0; var tttScale = 0; function draw() { //upload 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.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, (img.height * canvas.width) / img.width); //вписывание в ширину }; }; document.getElementById("uploadimage").addEventListener("change", draw, false) function turn() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.rotate(Math.PI / 2); var rectX = canvas.width / 2, rectY = canvas.height / 2; ctx.translate(-0, -500); ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, (img.height * canvas.width) / img.width); //вписывание в ширину } 
 <button onclick="turn()">turn</button> <input type="file" name="img" id="uploadimage" size="1" class="input_input_style"> <body style="background-color:3F6E6F;"> <canvas id="canvas" width="500" height="500"></canvas> <script src="config.js"></script>

  • Maybe I don’t know something about canvas, but I don’t understand that you should have a draw in an anonymous function on img.onload in a canvas variable? I do not see this variable defined. - cronfy Nov.
  • how what?) there a picture is loaded from the computer, <input type = "file" name = "img" id = "uploadimage" - kuzmich
  • Where is your canvas variable in js? Paste console.log(canvas); into img.onload console.log(canvas); that the console will output? - cronfy Nov.
  • Thanks for the help, I fixed it. there was one problem - how do I calculate the point around which to turn - ctx.translate (-0, -500); this is not half the width and half the height, but something strange - Kuzmich

0