)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Faster than save/restore HTML5 canvas

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth
  5. canvas.height = innerHeight
  6.  
  7. document.body.append(canvas)
  8.  
  9. c.fillStyle = 'black'
  10. c.fillRect(0, 0, canvas.width, canvas.height)
  11.  
  12. class Shooter {
  13.   constructor() {
  14.     this.x = innerWidth / 2
  15.     this.y = innerHeight / 2
  16.     this.vx = Math.random() * 10 - 5
  17.     this.vy = Math.random() * 10 - 5
  18.     this.color = 'rgba(255, 0, 0, 0.5)'
  19.     this.size = 10
  20.     this.halfSize = this.size / 2
  21.   }
  22.   draw() {
  23.     this.x += this.vx
  24.     this.y += this.vy
  25.  
  26.     if (this.x < 0) {
  27.       this.x = innerWidth
  28.     } else if (this.x > innerWidth) {
  29.       this.x = 0
  30.     }
  31.  
  32.     if (this.y < 0) {
  33.       this.y = innerHeight
  34.     } else if (this.y > innerHeight) {
  35.       this.y = 0
  36.     }
  37.  
  38.     c.fillStyle = this.color
  39.     c.translate(this.x, this.y)
  40.     c.fillRect(-this.halfSize, -this.halfSize, this.size, this.size)
  41.  
  42.     c.setTransform(1, 0, 0, 1, 0, 0)
  43.   }
  44. }
  45.  
  46. const NUM = 1000
  47. const shooters = []
  48. for (let i = 0; i < NUM; i++) {
  49.   shooters.push(new Shooter())
  50. }
  51.  
  52. function loop() {
  53.   c.fillStyle = 'rgba(0, 0, 0, 0.1)'
  54.   c.fillRect(0, 0, innerWidth, innerHeight)
  55.  
  56.   for (let i = 0; i < NUM; i++) {
  57.     shooters[i].draw()
  58.   }
  59.   requestAnimationFrame(loop)
  60. }
  61. loop()

Using setTransform(1, 0, 0, 1, 0, 0) is faster than using save and restore. If you don’t need to save context info like fills, line styles etc… consider this method.

// canvas // graphics // javascript // math // matrix // tricks

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}