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.
requestAnimationFrame(update)
. It will only call update
once though. So in update
we must call it again.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.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)
}