DOM events opvangen in js class
Misschien kijk ik gewoon niet goed genoeg, maar heeft iemand een suggestie?
Even in verkorte vorm wat ik tot dusver heb gedaan:
1.
in een div een canvas gemaakt:
<canvas id="mainCanvas" style="z-index:0" width="100" height="100"></canvas>
2.
met: window.onload = initCanvas(); een functie gestart.
3.
In de start functie:
function initCanvas() {
//alert('It works');
canvasArea.create(bodyWidth);
canvasArea.drawGrid();
} // initCanvas()
4.
in het js object het canvas aanpassen:
var canvasArea = { // initializes object instance.
canvas : document.getElementById('mainCanvas'),
create : function(bodyWidth) {
this.canvas.width = 0.8 * bodyWidth;
this.canvas.height = 0.8 * this.canvas.width;
this.context = this.canvas.getContext('2d');
}, // create canvas function() =======================
En nog een reeks andere functies wo drawGrid()
} // canvasArea ======================================
In dit object wil ik een eventlistener met afhandeling plaatsen.
5.
Tot dusver werkt het alleen als de eventlistener BUITEN het object plaats.
canvas = document.getElementById('mainCanvas');
resizeCanvas(canvas);
window.addEventListener('resize', function(event) {
resizeCanvas(canvas);
});
function resizeCanvas(canvas) {
var bodyWidth = document.body.clientWidth; // width of <body>
if ((bodyWidth <= maxWidth) && (bodyWidth >= minWidth)) {
//resize the canvas
canvas.width = 0.8 * bodyWidth;
canvas.height = 0.8 * canvas.width;
canvasArea.drawGrid();
return canvas;
};
} // resizeCanvas() ===============================================
wat ik al zei: heeft iemand een suggestie hoe dit BINNEN het object kan?
Er zijn nog geen reacties op dit bericht.