I have this code and I always have to creat the const ctx at begin of document with same name used in the class, and I wonder if have way make this class more portable for others project
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
class layer{
constructor(image, speedModifier){
this.x = 0;
this.y = 0;
this.width = 2400;
this.height = 700;
//this.x2 = this.width;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier
}
update(){
this.speed = gameSpeed * this.speedModifier;
this.x = gameFrame * this.speed % this.width;
}
draw(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
}
Just export your class and make your class take in a context in the constructor.
export class Layer {
constructor(image, speedModifier, context) {
this.context = context;
this.x = 0;
this.y = 0;
this.width = 2400;
this.height = 700;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier
}
draw(){
this.context.drawImage(this.image, this.x, this.y, this.width, this.height);
this.context.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
}
Now anyone who uses your class can import it:
import { Layer } from './layer.js';
And the user of the class has to get the canvas context. However they can then get that once and pass it in to as many layers as they want:
const context = document.querySelector('canvas').getContext('2d');
const layer1 = new Layer(someImage, 1, context);
const layer2 = new Layer(anotherImage, 1, context);
const layer3 = new Layer(thirdImage, 2, context);
Nothing more you can really do beyond that.