Why TEMP is not defined?

[doox911]

I followed your instructions, but I receive: Uncaught ReferenceError: TEMP is not defined.

main.js:

var app = new PLAYGROUND.Application({ render: TEMP.showDimensions, container: 'svg-container' });

[rezoner]

It's not the part of the library. It's just a piece of code to show dimensions in examples. If you want it then just copy/paste that on top of your code. Although I am not sure if this is something you want as you seem to be toying with SVGs and this is Canvas based.

var TEMP = {};

TEMP.showDimensions = function() {
    this.container.style.background = "#000";
    this.layer.clear("#026");

    this.layer.fillStyle("#fff").font("16px Arial");
    this.layer.textAlign("center");

    this.layer.stars(16, this.center.y, 0.5, 0.5, Math.PI / 2, 1.0)
    this.layer.fillText(this.height + " px", 0, 0);
    this.layer.restore();

    this.layer.stars(this.center.x, this.height - 8, 0.5, 0.5, 0, 1.0)
    this.layer.fillText(this.width + " px", 0, 0);
    this.layer.restore();

    this.layer.stars(this.center.x, this.center.y, 0.5, 0.5, 0, 1.0)
    this.layer.fillText("x " + this.scale.toFixed(2), 0, 0);
    this.layer.restore();
}

[doox911]

I would like to draw a grid and use the scale as shown in the examples makerjs.

[rezoner]

Scaling the whole application window will not give you the results you want. There is a lot of experimentation ahead of you to get that effect. You have to draw the lines manually and the scale is really the gap between them. Something to get you started from top of my head:

playground({

    render() {

        this.layer.clear("#0af");

        let cols = 10;
        let rows = 10;

        let gap = 32;

        this.layer.strokeStyle("#ffffff");

        for(let x = 0; x < cols; x++) {

            this.layer.moveTo(x * 32, 0);
            this.layer.lineTo(x * 32, this.height);

        }

        for(let y = 0; y < rows; y++) {

            this.layer.moveTo(0, y * 32);
            this.layer.lineTo(this.width, y * 32);

        }

    }

});

You have to multiply gap by scale and calculate number of rows and cols depending on screen size. Not as easy as it first looked like but I am sure you will manage to find the solution after some experimentation.

[rezoner]

I would also post a question on stackoverflow asking "How to draw an infinite zoom grid like this using canvas" because maybe I am overengineering that.

[doox911]

Thank you for taking the time, probably it will not suit me.