home.

tagged: canvas

Javascript: A scrolling background in canvas

If you want a scrolling background in Canvas let's first do the initial canvas stuff, including specifying the canvas width and height, and setting a new image and loading a local png file in it.

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
var canvasWidth = 1000 // for example
var canvasHeight = 400 // for example
var image = new Image()
image.src = "somefile.png" // for example

Next let's specify the scrolling speed in pixels and initial x position:

var speed = -0.2
var x = 0;

Let's create a update function. It will move the x position depending on the pixel speed.
 
Then it will draw two images, one that will be scrolling off the screen, another that will be to the right of it.

function update() {
  x += speed
  x %= canvasWidth
  ctx.drawImage(image, x, 0, 
    canvasWidth, canvasHeight)
  ctx.drawImage(image, x + canvasWidth, 0, 
    canvasWidth, canvasHeight)

  requestAnimationFrame(update)                      
} 
requestAnimationFrame(update)

It's doing two other things.
  1. The whole thing is started with requestAnimationFrame(update). It will only call update once though. So in update we must call it again.
  2. Say the canvas width is 500. Once x is 501 the image will be off the canvas. To make it back we can do 501 % 500 to get the position 1. (And when it's 499 that will produce 499 anyway). So that what the x %=500 lines does.

javascript canvas

Javascript: Draw rounded rectangle in canvas

Canvas doesn't provide a method to do rounded rectangles. But we can make one with arcs and lineTos.
 
We can also add it to the CanvasRenderingContext2D prototype. This means we can use it like the below. And set your own stroke and fill styles:

  let canvas = document.getElementById('example');
  let ctx = canvas.getContext('2d');  
  ctx.beginPath();
  ctx.roundedRectangle(0, 0, 100, 100, 20);
  ctx.stroke();
  
  ctx.beginPath();  
  ctx.roundedRectangle(5, 5, 90, 90, 15);
  ctx.stroke();

Here's the function to draw a rounded rectangle.

CanvasRenderingContext2D.prototype.roundedRectangle = function(x, y, width, height, rounded) {
  const radiansInCircle = 2 * Math.PI
  const halfRadians = (2 * Math.PI)/2
  const quarterRadians = (2 * Math.PI)/4  
  
  // top left arc
  this.arc(rounded + x, rounded + y, rounded, -quarterRadians, halfRadians, true)
  
  // line from top left to bottom left
  this.lineTo(x, y + height - rounded)

  // bottom left arc  
  this.arc(rounded + x, height - rounded + y, rounded, halfRadians, quarterRadians, true)  
  
  // line from bottom left to bottom right
  this.lineTo(x + width - rounded, y + height)

  // bottom right arc
  this.arc(x + width - rounded, y + height - rounded, rounded, quarterRadians, 0, true)  
  
  // line from bottom right to top right
  this.lineTo(x + width, y + rounded)  

  // top right arc
  this.arc(x + width - rounded, y + rounded, rounded, 0, -quarterRadians, true)  
  
  // line from top right to top left
  this.lineTo(x + rounded, y)  
}

javascript canvas

Page 2 of 2
prev