Ad

Why Doesn't My Canvas Animation Show?

- 1 answer

I have been working on a canvas animation of a circle that moves in a random direction, and every second the direction changes. I do that by changing a velocity vector every second by repeatedly calling a function using setInterval, while changing the position of the circle's center and drawing it in another function using requestAnimationFrame. The result is an empty canvas, and I'm not sure why. The code is split into the following three files:

random_ball.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Random Ball</title>
  <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="random_ball.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="random_ball.js"></script>
</body>
</html>

random_ball.css

html, body{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
canvas{
  position: absolute;
  width:  50vw;
  height: 50vh;
  top: 25vh;
  left: 25vw;
  border-style: solid;
  margin: 0;
  padding: 0;
}

random_ball.js

const canvas = document.getElementById('canvas')
const bounds = canvas.getBoundingClientRect()
const TWO_PI = 2*Math.Pi
const R = 25
const MAX_Y = bounds.height - R
const MAX_X = bounds.width - R
const ctx = canvas.getContext('2d')

function randomInterval(min, max){
  return Math.random()*(max - min) + min
}

function randomVelocity(){ // velocity is pixels/sec
  VEL.X = randomInterval(-POS.X + R, MAX_X - POS.X)
  VEL.Y = randomInterval(-POS.Y + R, MAX_Y - POS.Y)
  console.log('VEL: ' + JSON.stringify(VEL))
}

var POS = {X: bounds.height/2, Y: bounds.width/2}
var VEL = {X: 0, Y: 0}
var LAST_TIME = window.performance.now()

function drawCircle(color){
  ctx.strokeStyle = color
  ctx.beginPath()
  ctx.moveTo(POS.X, POS.Y)
  ctx.arc(POS.X, POS.Y, R, 0, TWO_PI, true)
  ctx.stroke()
}

function draw(timestamp){
  var dt = (timestamp - LAST_TIME)/1000
  var dx = VEL.X*dt
  var dy = VEL.Y*dt

  drawCircle('#FFFFFF') // erase the old drawing by making it white
  POS.X += dx
  POS.Y += dy
  //console.log('POS: ' + JSON.stringify(POS))
  drawCircle('#000000')
  LAST_TIME = timestamp
  requestAnimationFrame(draw)
}

randomVelocity()
drawCircle('#000000')
setInterval(randomVelocity, 1000) //change velocity every second
requestAnimationFrame(draw)

I suspect that drawing white over the old circle means the picture is changing too fast for me to see it.

Ad

Answer

You might want to familiarize yourself with JavaScript syntax rules, and possibly a code checker like JSHint.

The main problem with your code is that you're referencing a nonexistent property of the Math object. Math has no Pi property. It's spelled PI (all caps). JavaScript is case sensitive about these things.

Next: a more common practice for clearing the canvas is to use ctx.clearRect(0, 0, width, height)things.

Next: a more common practice for clearing the canvas is to use ctx.clearRect(0, 0, width, height). Here's a JSFiddle to help you see the difference: https://jsfiddle.net/Hatchet/dy2dognp/

Ad
source: stackoverflow.com
Ad