How to draw 3D box layout according to inches

JavaScript
1

I need to draw a box like this and scale width, height and length according to certain dimensions in inches like 17x10x4"

438176-200

I know how to draw lines

function drawlines(canvas, context){


        context.beginPath();
        context.moveTo(188, 130);
        context.bezierCurveTo(140, 10, 388, 10, 388, 170);
        context.lineWidth = 5;
        // line color
        context.strokeStyle = "black";
        context.stroke();
    }

can you help me please

2

so, find the points you need to draw lines between, and draw lines there.

3

Your drawing looks like a cube, where all edges would be the same length.

4

I’m guessing that may be part of the problem, of which I see two.

One is the units. Monitors don’t really do “inches” reliably. I’d probably “scale” them to pixels.

The other is knowing how to use the pythagorean theorem.

5

and then there’s the question of canvas size, and offsets, and drawing capacity, and negative dimension size, and…

Or we could ask why the user wants to draw an arbitrarily sized box, because that seems an odd use case.

It’s not possible to do simple scaling on this drawing, because scale is applied in two dimensions (the dimensions of the canvas), and your measurements are in three (the pseudo-measurements of the solid). So you’d have to redraw the lines any time the dimensions changed.

2 Likes
6

Is the intention to draw an isometric projection of a 3d solid, or is perspective an issue as well?

7

This article may be of interest

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.