examples/usage-Ctx.html

<html>
<head>
  <meta charset="UTF-8">
  <title>Component - canvas demo</title>
  <script src="../dist/component.min.js"></script>
  <!-- include an enhanced canvas 2dContext API add-on -->
  <script src="../dist/ctx.min.js"></script>
  <style>
    .container, video {
      border: 1px solid #222;
      margin: 1em;
      width: 640px;
      height: 480px;
    }
  </style>
</head>
<body>

  <canvas class="container"></canvas>
  <br>
  <video crossorigin="*" controls></video>

<script>
  let context; // will be a reference to Foo.ctx, so we can access it outside the components view
  let frame = 1; // frame count
  const arr = [ 1,2,3,4,5,6,7,8,9,0 ]; // used in a maths helper example later on


  // Enable the enhanced canvas 2dContext API (optional).
  // The extended `ctx` enables:
  //  - HDPI aware size() method
  //  - new drawing methods
  //  - most methods are chainable
  //  - save to image, record to video
  Component.Ctx = Ctx;


  // define a new component
  const Foo = new Component({ x: 280, y: 100 });
  // define a "view", that draws to the components canvas
  Foo.view = (props, ctx) => {
    if (frame === 1) {
      context = ctx;
      // set the canvas size (w, h, aspectRatio)
      ctx.size(640, 480)           // set width and height, ignore aspect ratio
      //ctx.size(640, 480, null)   // same as above
      //ctx.size(null, 480, 4/3)   // set as 4:3,  grow till height = 480
      //ctx.size(null, 480, 16/9)  // set as 16:9, grow till height = 480
      //ctx.size(640, null, 3/4)   // set as 4:3, crop till width = 640
      //ctx.size(640, null, 9/16)  // set as 16:9, crop till width = 640
    }


    ctx
      .clear()  // using `clear(true)` will clear transforms too

      // uncomment one of the lines below to try out the "camera":
      // usage: camera(xCenter, yCenter, scale, rotation); // rotation is in degrees

      //.camera(ctx.canvas.width/2, ctx.canvas.height/2, 1, 0)
      //.camera(320, 240, 2, 0)
      //.camera(640, 480, 2, 0)
      //.camera(320, 240, 4-(1+frame/400), 0)

      .beginPath()
      .drawGrid(12)

      .beginPath()
      .drawGridBox(400,280, 200,100, 25, 0.5, '#c00')

      .beginPath()
      .checkerboard(30, 300-frame, 100, 100, 15, '#222', '#efefef')

      .beginPath()
      .fillStyle('purple')
      .polygon([
          [10 + props.y, 10],
          [200- + props.y / 2,10 + props.y],
          [200,200],
          [100 + props.y, 220],
        ],
        [],  // line dash pattern [dash,gap,dash,gap,..]
        true // fill or not
      )
      .fill()

      .beginPath()
      .moveTo(0, 0)
      .lineWidth(2)
      .strokeStyle('blue')
      .lineTo(props.x, props.y)
      .stroke()

      .beginPath()
      .strokeStyle('black')
      .rect(props.x / 2, props.y / 2, 50, 50)
      .stroke()

      .beginPath()
      .fillStyle('yellow')
      .strokeStyle('green')
      .fillRoundedRect(10, 70, 50, 75, 10)
      .stroke()

      .beginPath()
      .strokeStyle('pink')
      .lineWidth(4)
      .strokeTriangle(220, 60, 50, 45)

      .beginPath()
      .fillStyle('orange')
      .fillCircle(320, 240, 20, 0 + frame)

      .beginPath()
      .fillStyle('green')
      .fillRing(80, 100, (props.y / 8) + 10, (props.y / 8) + 20, 100)

      .beginPath()
      .gradientRect(props.y, props.y, 200, 80,
        // fill gradient settings
        [
          [ 0.0, "red"   ],
          [ 0.5, "blue"  ],
          [ 1.0, "rgb(0,255,0)" ],
        ],
        true // horizontal (optional), defaults to true (false is vertical)
      )

      .beginPath()
      .gradientCircle(
        (props.y+10)*2, props.y-100,   // position x, y
        5, 50,                         // innerRadius, outerRadius
        50-props.y/5, 50-props.y/5,    // radius offset (from center of circle) x, y
        // fill gradient settings
        [
          [ 0, "red"   ],
          [ 1, "yellow" ],
        ],
      )

      .beginPath()
      .strokeStyle('gold')
      .fillStyle('yellow')
      .strokeStar(200, 200, 50, 5, 0)
      .fill()

      .drawImg(`<svg xmlns="http://www.w3.org/2000/svg" stroke="#000" stroke-width="1">
       <rect x="80" y="60" width="150" height="150" rx="20" fill="#F00"/>
       <rect x="100" y="80" width="150" height="150" rx="40" fill="#00F" fill-opacity=".7"/>
      </svg>`, 100 + props.y, 200 - props.y / 2, 250, 150) // urlOrElemOrCode, x, y, w, h

      .drawImg('https://i.imgur.com/yL240c7.png', 100+frame, 300, 150, 150)

      // pacman
      ctx.circle(320, 360, 50, 0+frame, false) // x, y, radius, degrees, antiClockwise
      ctx.fillStyle("yellow");
      ctx.fill()

      .strokeStyle('black')
      .fillStyle('black')
      .lineWidth(1)

      //      x1,  y1, x2, y2, style, size, whichEnd,  headAngle
      .arrow(150, 360, 50, 60,     0,   10,        3,     33)
      //         x1,  y1,  r, start,  end, antiClockwise, style, size,  whichEnd    headAngle
      .arcArrow(150, 360, 50,     0,  180,         false,     0,   10,         3,   33)

      .spiral(500, 100,  80, 300,  frame, 2, '#c44')

      // uncomment one of the lines below to try the "chroma key" filtering

      //.chromaKey(200, [255,0,0]) // make red pixels transparent, with a tolerance of 200
      //.chromaKey(150, [0,0,255]) // make blue pixels transparent, with a tolerance of 150
      //.chromaKey(150, [0,255,0]) // make green pixels transparent, green is always max tolerance
      //.chromaKey()               // make green pixels transparent, same as above

      // maths helpers
      //console.log(`The distance from 0,0 to 0,${props.y} is`, ctx.distance(0, 0, 0, props.y))
      //console.log(`Random number from arr: ${ctx.randomFrom(arr)}`)

      frame++;
  };


  // render to a canvas, and attach its context (`ctx`) to our component
  Foo.render('.container', '2d');


  // ..after the first frame renders (takes about 16 milliseconds)
  // we can access `ctx` outside this components view, as `context`
  setTimeout(() => {
    context.video.record(60); // start recording a video @60fps
  }, 20);


  // move stuff around a bit in an animated loop
  const loop = setInterval(() => {
    Foo.setState({
      x: 300,
      y: Foo.state.y += 1
    });
  }, 1000 / 60);


  // after 5 seconds, stop loop, stop recording the canvas to video,
  // and offer to download it
  setTimeout(() => {
    clearInterval(loop);
    context.video.stop();
    context.video.toElement(el => document.querySelector('video').src = el.src);
    //context.video.saveAs('canvas-as-video.webm');
  }, 5500);

</script>
</body>
</html>

<!--


    ctx
      chart(someArrayOfObjects)
        .position(0, 0)
        .title('How many hours did you work each week this year?')
        .width(800)
        .height(600)
        .margins([24, 24, 24, 24])
        .xAxis({
          title: { text: 'Days', position: 'below' },
          range: [0, 365],
          labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
          ticks: {
            length: 4,
            color: '#444',
            position: 'above',
          },
        })
        .yAxis({
          title: { text: 'Hours', position: 'left' },
          range: [0, 24],
          ticks: {
            length: 4,
            color: '#444',
            position: 'right',
          },
        })
        .draw(d => {
          // this = chart object
          // Here are the properties and methods available inside draw()
          this.width
          this.height
          this.margin
          this.xAxis
          this.yAxis
          //

          // background grid
          this.grid(cellSize, lineColor, lineWidth)
          // scatter plot
          this.circle(x,y)     // radius based on d.value
          // bar charts
          this.rect(x,y)       // h based on d.value, w based on number of bars
          // pie charts
          this.pieSlice(x,y)   // start + end rotations based on d.value and data index
          // line charts
          this.line(x,y)       //


        })


-->