In lib/framework/draw.ts
, we will implement the drawPicture
function that we created before. Using instanceof
we can check which kind of picture we must draw.
We will interpret the location of an object as the center of it. Thus, new Rectangle(10, 10, 100, 100)
will draw a rectangle around 10,10. We can draw the outline of a rectangle or the whole rectangle with strokeRect
and fillRect
:
import { Picture, Rectangle, RectangleOutline, Circle, CircleOutline, Line, Text, Color, Translate, Rotate, Scale, Pictures, Path } from "./picture"; export function drawPicture(context: CanvasRenderingContext2D, item: Picture) { context.save(); if (item instanceof RectangleOutline) { const { x, y, width, height, thickness } = item; context.strokeRect(x - width / 2, y - height / 2, width, height); } else if (item instanceof Rectangle) { const { x, y, width, height } = item; context.fillRect(x - width / 2, y -...