- Jump To … +
  ./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-015a.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-019a.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/core-001.js ./demo/delaunator-001.js ./demo/delaunator-002.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-015.js ./demo/dom-016.js ./demo/dom-017.js ./demo/dom-018.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-002a.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-028.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/modules-006.js ./demo/packets-001.js ./demo/packets-002.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/rapier-001.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js

- §

  # Demo Canvas 015

  Phrase entity (make, clone, method, multiline)

- §

  Run code

      import {
          library as L,
          makeDragZone,
          makePhrase,
          makeRender,
      } from '../source/scrawl.js'

      import { reportSpeed, killArtefact } from './utilities.js';

- §

  #### Scene setup

  Get a handle to the Canvas wrapper

      const canvas = L.artefact.mycanvas;

- §

  Namespacing boilerplate

      const namespace = 'demo';
      const name = (n) => `${namespace}-${n}`;

- §

  Create and clone Phrase entitys

      makePhrase({
          name: name('myphrase_fill'),

          text: 'H&epsilon;lj&ouml;!',
          font: 'bold 40px Garamond, serif',

          startX: '14%',
          startY: '28%',
          handleX: 'center',
          handleY: 'center',

          fillStyle: 'green',
          strokeStyle: 'gold',

          lineWidth: 2,
          lineJoin: 'round',
          shadowOffsetX: 2,
          shadowOffsetY: 2,
          shadowBlur: 2,
          shadowColor: 'black',

          showBoundingBox: true,
          boundingBoxColor: 'red',

      }).clone({
          name: name('myphrase_draw'),
          startX: '38%',
          method: 'draw',

      }).clone({
          name: name('myphrase_drawAndFill'),
          startX: '84%',
          method: 'drawAndFill',

      }).clone({
          name: name('myphrase_fillAndDraw'),
          startX: '62%',
          method: 'fillAndDraw',
          sharedState: true

      }).clone({
          name: name('myphrase_drawThenFill'),
          startX: '14%',
          startY: '67%',
          method: 'drawThenFill'

      }).clone({
          name: name('myphrase_fillThenDraw'),
          startX: '38%',
          method: 'fillThenDraw',

      }).clone({
          name: name('myphrase_clear'),
          startX: '62%',
          method: 'clear'

      }).clone({
          name: name('myphrase_multiline'),

          text: 'Lorem ipsum har varit standard 😀 ända sedan 1500-talet, när-en-okänd-boksättare-tog att antal 🤖 bokstäver och blandade dem för att göra ett 🎻 provexemplar av en bok.',

          width: 120,
          justify: 'center',

          size: '12px',
          weight: 'normal',

          startX: '84%',
          method: 'fill',

          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 0,
      });

- §

  Change the fill and stroke styles on one of the phrase entitys, and any entity sharing that phrase’s state

      L.artefact[name('myphrase_fillAndDraw')].set({
          fillStyle: 'blue',
          strokeStyle: 'coral'
      });

- §

  #### User interaction

  Create the drag-and-drop zone

      const current = makeDragZone({

          zone: canvas,
          endOn: ['up', 'leave'],
          exposeCurrentArtefact: true,
          preventTouchDefaultWhenDragging: true,
      });

- §

  #### Scene animation

  Function to display frames-per-second data, and other information relevant to the demo

      const report = reportSpeed('#reportmessage', function () {
          const dragging = current();
          return `Currently dragging: ${(typeof dragging !== 'boolean' && dragging) ? dragging.artefact.name : 'nothing'}`;
      });

- §

  Create the Display cycle animation

      makeRender({

          name: name('animation'),
          target: canvas,
          afterShow: report,
      });

- §

  #### Development and testing

      console.log(L);

      console.log('Performing tests ...');
      killArtefact(canvas, name('myphrase_fill'), 4000);
      killArtefact(canvas, name('myphrase_fillAndDraw'), 5000);
      killArtefact(canvas, name('myphrase_multiline'), 6000);