O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required