I'm feeling stuck with my current project. I've come across similar questions asked multiple times in this thread and also here, but none of the solutions seems to fit my specific problem. It seems that the main issue lies in how this is referencing the wrong context. How can I leverage an arrow function to capture the correct this from the declaration site?
drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
// more code than displayed here
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
onFileSelected(event) {
for (const file of event.target.files) {
if (file) {
const reader = new FileReader();
reader.onload = function(e: FileReaderEvent) {
const canvas = <HTMLCanvasElement>document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image;
img.onload = draw;
function draw() {
this.drawImageProp(ctx, this, 0, 0, canvas.width, canvas.height, 0.5, 0.5);
}
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
}