I am trying to make something using html canvas but I have to pass context to each function again and again. Is there a way to skip or automate this task somehow?
For example in p5.js we only have setup and draw functions and no extra context etc.. I want to do the same thing but at a small scale
function render() {
console.log(data)
// i have to pass context again and again to each function
drawPoint(context, new Vector(mousex, mousey), 6)
drawPoint(context, new Vector(100, 100), 5, "red")
drawPoint(context, new Vector(100, 100), 5, "red")
drawPoint(context, new Vector(100, 100), 5, "red")
drawPoint(context, new Vector(100, 100), 5, "red")
requestAnimationFrame(render)
}
render()
I want it to be like
function start(){
// some global variables that may be accessed in
// the render function directly
}
function render(){
// some code without passing any context
drawpoint(new Vector(100, 100))
}
In simple words I just want to mimic the same effect as the p5.js processing, or arduino ide etc.. just two functions one for setup and one for loop
Does someone have any idea how to do it?
make your own function?
function myDrawPoint () {
drawPoint.apply(null, [context, ...Object.values(arguments)]);
}
You could use a higher-order function to basically give the context once, then just call that function repeatedly.
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
function createDrawPoint(context) {
return (vector) => {
console.log('drawPoint called with context', vector);
// do something with context here
};
}
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const drawPoint = createDrawPoint(context);
drawPoint(new Vector(100, 100));
drawPoint(new Vector(100, 150));
drawPoint(new Vector(150, 100));Basically, you create a function that'll return the actual drawPoint() function, but with context bound within its scope, so you don't have to pass it in repeatedly.
You could do the same with multiple methods as well, if you wanted, like this.
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
function createDrawPoint(context) {
return {
drawPoint: (vector) => {
console.log('drawPoint called with context', vector);
// do something with context here
},
drawLine: (vectorA, vectorB) => {
console.log('drawLine called with context', vector);
}
};
}
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const { drawPoint, drawLine } = createDrawPoint(context);
drawPoint(new Vector(100, 100));
drawPoint(new Vector(100, 150));
drawPoint(new Vector(150, 100));
drawLine(new Vector(200, 200), new Vector(300, 300));Though if you have multiple I would probably group them into a class (or just an protoypal object constructor if you don't like the class syntax for some reason), unless this program literally only uses these functions.
class DrawHelper {
constructor(context) {
this.context = context;
}
drawPoint(vector) {
console.log('drawPoint');
}
drawLine(a, b) {
console.log('drawLine');
}
}
class Vector {}
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const drawHelper = new DrawHelper(context);
drawHelper.drawPoint(new Vector(100, 100));
drawHelper.drawPoint(new Vector(100, 200));
drawHelper.drawLine(new Vector(300, 300), new Vector(400, 400));