I can't figure out why everything seems to work, the doCanvas function is called, and it works separately. while decreasing the scale, it does not erase the old pattern

var img; 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.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'); doCanvas(); ctx.scale(tttScale, tttScale); ctx.drawImage(img, 0, 0, img.width, img.height); // alert(tttScale); } function doCanvas() { ctx.fillStyle = '#FF8F00'; ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = '#fff'; //alert("111"); }; 
 <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> </br> <canvas id="canvas" width="500" height="500" ;></canvas> <script src="config.js"></script> </body> </html>

    1 answer 1

    Turnkey solution => https://jsfiddle.net/c7ffxtjj/

    Gives the following error - Uncaught TypeError: Cannot read property 'width' of undefined

    • img.width variable img.width not initialized (add it to draw() )

    Well, and more.

    • To draw pictures use the following function:

    function draw(options) { var img = new Image(); img.src = options.file || options.filename; ctx.drawImage(img, options.x, options.y, options.width, options.height); }

    Where the options argument is an object with x, y, width, height, file (or filename ) parameters.

    • to clean the canvas, use `Octx.clearRect ();

    Ideally, the following will do:

      var width = document.getElementsByTagName('canvas')[0].width, height = document.getElementsByTagName('canvas')[0].height; function clear(Options) { ctx.clearRect(Options.x, Options.y, Options.width, Options.height); }

    Where Options is an object with required parameters x, y, width, height

    To paint over the canvas, if you do not need to draw a picture, you can use

     function Rect(parameters) { ctx.fillStyle = parameters.color || 'black'; ctx.fillRect(parameters.x, parameters.y, parameters.width, parameters.height); }

    where parameters is an object with mandatory values ​​of x, y, width, height and optional color (if it is not present, a red square will be drawn)

    • To initialize the game cycle (constant drawing), use this template => window.onload = Start;

      var loop = function () {now = performance.now (); dt = dt + Math.min (1, (now-last) / 1000);

      while (dt> step) {dt = dt - step}

      last = now;

      Update (dt);

      requestAnimationFrame (loop); // repeat it again}, last = performance.now (), step = 1/60, dt = 0, now; `

      requestAnimationFrame (loop);

    where function Start and function Update

    • and who gives an error? chrome is silent .. added var img.width; - now the canvas disappeared altogether - NormalArs
    • Here you need to upload the code to the hosting, the script file name is not shown via jsfiddle, if you don’t want to redo it to my standards, just after img = new Image(); Fill out the ʻimg.width = your_value` - TitaN
    • Throw down the scripts on jsfiddle, I'll take a look - TitaN
    • Redoing a shorter script - TitaN
    • Now I'll take off the link to the working version if I can do it - TitaN