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