Breaking News: Grepper is joining You.com. Read the official announcement!

grid implementation html canvas

Himanshu Jangid answered on December 6, 2021 Popularity 9/10 Helpfulness 2/10

answer grid implementation html canvas

related javascript draw canvas grid

grid implementation html canvas

Comment

import { Shapes } from "./shapes";
import { Vector } from "./vector";

/**
 * Grid class
 * @class Grid
 * @classdesc Grid class
 * @param {number} width - width of the grid
 * @param {number} height - height of the grid
 * the class to create a virtual grid on the canvas with the given width and height for each cell
 */
export class Grid {
    public width: number
    public height: number
    public Shape : Shapes
    constructor(width: number, height: number) {
        this.width = width
        this.height = height
        this.Shape = new Shapes()
    }

    /**
     * @function draw
     * draw the grid on the canvas on the canvas in every frame
     * @memberof Grid
     */
    public draw() {
        var x, y;

        for (x = 0; x < window.innerWidth; x += this.width) {
            for (y = 0; y < window.innerHeight; y += this.height) {
                this.Shape.setStrokeStyle("#000000")
                this.Shape.setColor("#00000011")
                this.Shape.drawRectangle(new Vector(x, y), this.width, this.height)
            }
        }
    }

   // draw point on grid using it width and height
   /**
    * @function drawPoint
    * @param {Vector} point
    * draw a point on the grid according to the grid's cordinates not the canvas cordinates 
    * @memberof Grid
    */
    public drawPoint(point: Vector) {
        this.Shape.drawRectangle(new Vector(point.x * this.width, point.y * this.height), this.width, this.height)
    }

    /**
     * @function drawPoints
     * @param {Vector[]} points 
     * draw a list of points on the grid according to the grid's cordinates not the canvas cordinates
     * @memberof Grid
     */
    public drawPoints(points: Vector[]) {
        points.forEach(point => {
            this.Shape.drawRectangle(new Vector(point.x * this.width, point.y * this.height), this.width, this.height)
        })
    }

}

Popularity 9/10 Helpfulness 2/10 Language typescript

Source: Grepper

Tags: canvas grid html implementation typescript

Link to this answer
Share Copy Link

Contributed on May 24 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

Closely Related Answers

javascript draw canvas grid

Comment

var ctx = canvas.getContext('2d');

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: codereview.stackexchange.com

Tags: canvas ca

Link to this answer
Share Copy Link

Contributed on Dec 06 2021

Fancy Frog

0 Answers Avg Quality 2/10

grid implementation html canvas

Contents

More Related Answers

grid implementation html canvas

Closely Related Answers

javascript draw canvas grid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.