hole-example.js

total 0
used 0
limit 0
/* title: a "Hole" categories: hole files: head point mouse stage dragging ../point_src/image.js --- Cut a _hole_ through another vector. In this example we have a _box_ and a _circle_. Because the second entity (the `hole`) is drawn immediately after the first entity (the `box`). The canvas pen _cuts_ through the previous drawing. The polypus `image` is applied _before_ the overlay. */ class MainStage extends Stage { canvas='playspace' live = true mounted(){ this.image = new ImageLoader("../images/polypus.png") this.box = this.center.copy().update({radius:200}) this.hole = this.box.copy().update({radius: 100}) this.image.position.xy = this.box.xy this.dragging.add(this.box, this.hole, this.image.position) } draw(ctx){ this.clear(ctx) this.image.draw(ctx) ctx.fillStyle = '#544466' ctx.beginPath() this.box.draw.box(ctx) this.hole.draw.arc(ctx) ctx.fill() } } ;stage = MainStage.go();
Run
Meta Data
title a "Hole"
imports ()
files ('head', 'point', 'mouse', 'stage', 'dragging', '../point_src/image.js')
unused_keys ()
unknown_keys ('categories',)
categories ['hole']
filepath_exists True
path hole-example.js
filepath hole-example.js
clean_files ('../point_src/core/head.js', '../point_src/pointpen.js', '../point_src/compass.js', '../point_src/center.js', '../point_src/point-content.js', '../point_src/pointdraw.js', '../point_src/relative-xy.js', '../point_src/pointcast.js', '../point_src/point.js', '../point_src/events.js', '../point_src/automouse.js', '../point_src/stage-resize.js', '../point_src/functions/resolve.js', '../point_src/stage.js', '../point_src/functions/clamp.js', '../point_src/distances.js', '../point_src/protractor.js', '../point_src/text/beta.js', '../point_src/dragging.js', '../point_src/image.js')
markdown {'html': '<p>Cut a <em>hole</em> through another vector.\nIn this example we have a <em>box</em> and a <em>circle</em>.</p>\n<p>Because the second entity (the <code>hole</code>) is drawn immediately after the first\nentity (the <code>box</code>). The canvas pen <em>cuts</em> through the previous drawing.</p>\n<p>The polypus <code>image</code> is applied <em>before</em> the overlay.</p>', 'content': 'title: a "Hole"\ncategories: hole\nfiles:\n head\n point\n mouse\n stage\n dragging\n ../point_src/image.js\n---\n\nCut a _hole_ through another vector.\nIn this example we have a _box_ and a _circle_.\n\nBecause the second entity (the `hole`) is drawn immediately after the first\nentity (the `box`). The canvas pen _cuts_ through the previous drawing.\n\nThe polypus `image` is applied _before_ the overlay.'}