Package Exports

ctx-render-points

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ctx-render-points) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ctx-render-points

render points using html5 2d canvas

install

npm install ctx-render-points

use

renderPoints(ctx, radius, array)

ctx is the RenderingContext2D
radius is the radius of the points
array is an array of 2+ item arrays (only indices 0 and 1 will be used)

example

var center = require('ctx-translate-center');
var poly = require('ctx-render-polyline');
var points = require('./ctx-render-points');

var ctx = document.createElement('canvas').getContext('2d');

document.body.appendChild(ctx.canvas);

ctx.fillStyle = "black";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

center(ctx);

var polys = [[
  [-50, -50],
  [-50, 50],
  [50, 50],
], [
  [-30, -15],
  [5, 20],
  [-30, 20],
]];
ctx
ctx.beginPath();

  // wound CCW
  poly(ctx, polys[0]);
  ctx.closePath();

  // wound CW
  poly(ctx, polys[1]);
  ctx.closePath();

  ctx.fillStyle = "rgba(63, 95, 244, .5)";
  ctx.fill()
  ctx.strokeStyle = 'rgb(63, 95, 244)';
  ctx.stroke()

ctx.beginPath();
  points(ctx, 3, polys[0]);
  ctx.strokeStyle = "yellow";
  ctx.stroke();

ctx.beginPath();
  points(ctx, 2, polys[1]);
  ctx.fillStyle = "orange"
  ctx.fill();

results in:

points are drawn

license

MIT