Canvas drawing: paths, shapes and state

Canvas drawing starts with a context and explicit state. fillStyle, strokeStyle and lineWidth remain in effect until you change them, so a renderer must control state deliberately rather than assuming each shape starts fresh.

Call beginPath before an independent shape. Use moveTo and lineTo to describe its edges, closePath when the final edge should connect to the start, then fill or stroke. Save and restore state around transformations so a translated object does not shift the next drawing.

Separate logical coordinates from display size. A drawing buffer that matches only the CSS width may look soft on a dense display; a scaled buffer needs a corresponding transform and carefully converted pointer coordinates. Start with fixed dimensions before adding that resizing layer.

Try the idea

ctx.save();
ctx.translate(80, 60);
ctx.beginPath();
ctx.moveTo(0, -24);
ctx.lineTo(20, 18);
ctx.lineTo(-20, 18);
ctx.closePath();
ctx.fillStyle = "#ff6b35";
ctx.fill();
ctx.restore();