diff --git a/bundle.js b/bundle.js index 78ca97e..25ed62b 100644 --- a/bundle.js +++ b/bundle.js @@ -398,6 +398,12 @@ class Doodler { cb(); this.ctx.restore(); } + drawScaled(scale, cb) { + this.ctx.save(); + this.ctx.transform(scale, 0, 0, scale, 0, 0); + cb(); + this.ctx.restore(); + } drawImage(img, at, w, h) { w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y); } @@ -782,21 +788,23 @@ img.hidden; document.body.append(img); const p = new Vector(200, 200); doodler.createLayer(()=>{ - doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { - color: 'grey', - weight: 2 - }); - doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), { - color: 'grey', - weight: 2 - }); - doodler.line(p, p.copy().add(0, 12), { - color: 'brown', - weight: 4 - }); - doodler.line(p, p.copy().add(0, -12), { - color: 'brown', - weight: 4 + doodler.drawScaled(1.5, ()=>{ + doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { + color: 'grey', + weight: 2 + }); + doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), { + color: 'grey', + weight: 2 + }); + doodler.line(p, p.copy().add(0, 12), { + color: 'brown', + weight: 4 + }); + doodler.line(p, p.copy().add(0, -12), { + color: 'brown', + weight: 4 + }); }); }); document.addEventListener('keyup', (e)=>{ diff --git a/canvas.ts b/canvas.ts index 19d0a82..161be20 100644 --- a/canvas.ts +++ b/canvas.ts @@ -189,6 +189,13 @@ export class Doodler { this.ctx.restore(); } + drawScaled(scale: number, cb: () => void) { + this.ctx.save(); + this.ctx.transform(scale, 0, 0, scale, 0, 0); + cb(); + this.ctx.restore(); + } + drawImage(img: HTMLImageElement, at: Vector): void; drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void; drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) { diff --git a/main.ts b/main.ts index 403d07e..81734a8 100644 --- a/main.ts +++ b/main.ts @@ -41,10 +41,10 @@ doodler.createLayer(() => { // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20) - doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2}) + doodler.drawScaled(1.5, () => {doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2}) doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2}) doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4}) - doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4}) + doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})}) }); document.addEventListener('keyup', e => {