TypeScript: Modern JavaScript Development

Drawing on the canvas

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 ...