Hello!

There is the following part of the code:

(function () { var img = document.createElement('IMG'); img.src = "https://pixabay.com/static/uploads/photo/2016/08/06/19/23/bull-1575005_960_720.jpg"; var c = document.getElementById('canvas'); var ctx = c.getContext("2d"); var cw = c.width = 4040; var ch = c.height = 1000; ctx.strokeStyle = 'rgba(0,0,0,0)'; var framesPerSecond = 5; function animate() { setTimeout(function() { requestAnimationFrame(animate); // animating/drawing code goes here drawShape(); drawImg(); }, 1000 / framesPerSecond); } requestAnimationFrame(animate); function drawShape() { ctx.clearRect(0, 0, cw, ch); // clear canvas ctx.save(); ctx.beginPath(); ctx.moveTo(811.1, 780.3); //start ctx.bezierCurveTo(618.7 + generateCurves(), 731.5, 690.1, 757.3, 420.1, 462.29999999999995); ctx.bezierCurveTo(150.10000000000002 + generateCurves(), 167.29999999999995, 949.1, -237.20000000000005, 1349.6, 113.29999999999995); ctx.bezierCurveTo(1490.3 + generateCurves(), 236.39999999999995, 1787.1999999999998, 261.9, 1685.6, 527.3); ctx.bezierCurveTo(1609.5 + generateCurves(), 725.9, 1544.6, 656, 1422.1, 707.3); ctx.bezierCurveTo(1295.7 + generateCurves(), 760.2, 1174, 872.3, 811.1, 780.3); ctx.closePath(); ctx.stroke(); } function drawImg() { ctx.clip(); ctx.drawImage(img, 0, 0); ctx.restore(); } function generateCurves() { return Math.floor(Math.random() * 60) + 1; }})(); <canvas id="canvas"></canvas>

In general, there should be such a spot - required result

I can only do jerking, but not smooth animation.

I would be grateful for any help !!!

  • where is the animation? if a new picture is simply drawn on each redraw - Grundy
  • besides, the question is - everything is done with jerks. I just thought of this way. I would like to get advice - how to make everything smooth ... ... - Eugene Bredyuk
  • you need to take small steps for the transitions, perhaps just enough to reduce the change from 60, to some 2-5 - Grundy

1 answer 1

 var framesPerSecond = 5; setTimeout(function() { /* ... */ }, 1000 / framesPerSecond);

You get a drawing occurs every 200 milliseconds. Reduce this parameter to 50 milliseconds.

  • How can decreasing spacing add animation? - Grundy
  • In this case, everything flashes too quickly) This option does not suit me. But thanks for the offer! - Eugene Bredyuk
  • @ Yevgeny Bredyuk well, you do less for each step. How can you add smoothness without reducing the animation pitch? - Mihanik71