I am trying to have grid system via using canvas at ionic. I have reasearched previous samples, but could not solve… Can’t scroll horizontally in the grid. Thanks in advance…
My code is here;
grid.html
<ion-content scrollX="true" scrollY="true">
<canvas id="grid" (press)="pressEvent($event)"
width="4000" height="4000"></canvas>
</ion-content>
grid.ts
private _CANVAS : any;
private _CONTEXT : any;
ionViewDidLoad()
{
this.drawGrid(4001, 4001, "grid");
}
drawGrid(w, h, id) {
this._CANVAS = document.getElementById(id);
this._CONTEXT = this._CANVAS.getContext('2d');
this._CONTEXT.beginPath();
this._CONTEXT.canvas.width = w;
this._CONTEXT.canvas.height = h;
for (w = 5; w <= 4000; w += 50) {
this._CONTEXT.moveTo(w, 0);
this._CONTEXT.lineTo(w, 4000);
}
for (h = 5; h < 4000; h += 50) {
this._CONTEXT.moveTo(0, h);
this._CONTEXT.lineTo(4000, h);
}
this._CONTEXT.strokeStyle = "#a9a9aa";
this._CONTEXT.lineWidth = 2.5;
this._CONTEXT.stroke();
this._CONTEXT.font = "45px Arial";
this._CONTEXT.fillStyle = 'black';
}