https://github.com/lemonpi/context2dtracked

Context 2D with pen and transform tracking
https://github.com/lemonpi/context2dtracked

Last synced: 6 days ago
JSON representation

Context 2D with pen and transform tracking

• Host: GitHub
• URL: https://github.com/lemonpi/context2dtracked
• Owner: LemonPi
• Created: 2017-04-02T19:45:49.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:47:13.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T21:53:11.849Z (7 months ago)
• Language: JavaScript
• Size: 475 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 2D Drawing Context with tracked pen movement and transforms

A simple wrapper around CanvasRenderingContext2D in browsers

for debugging purposes and to retrieve the inverse transform.

An additional feature is that we manually scale inputs rather than have

the underlying context do it. This has the advantage of **preserving pattern

resolution** (with ctx.createPattern resolution normally degrades if you scale up the rendering context).

This means we cannot support unequal scaling for x and y on radial methods (arc and createRadialGradient).

In those cases we take the x scaling.

Operations not entirely supported:

- arcTo (will not be tracked, but will work)

- ellipse

## Usage

Get by cloning the repository, or `npm install context-2d-tracked` if using in Node context.

### building from source

```bash

npm install

npm run build

```

### demo

```bash

npm install

npm test

```

### include (browser)

Include `dist/Context2DTracked.js` in a script tag and use `Context2DTracked` as a global variable.

```html

    

    

const cv = document.getElementById("cv");

// can use just as a global variable in the browser

const ctx = new Context2DTracked(cv.getContext("2d"));

```

### include (CommonJS)

Only useful is the source is ultimately used in the browser since that's the only

place where canvas and rendering contexts exist. This would be the case if the

code's passed through `browserify` or `webpack`, for example.

```javascript

const Context2DTracked = require('context-2d-tracked');

```

### trace

Print a crosshair where the pen is currently at and return the coordinates.

```javascript

ctx.beginPath();

ctx.moveTo(20,25);

ctx.bezierCurveTo(100,200,200,100,350,400);

ctx.trace();    // print

ctx.stroke(); 

```

### control points

Show the control points of bezier and quadratic curves by passing in 

an extra argument that's non-false to the drawing methods.

```javascript

ctx.beginPath();

ctx.moveTo(20,25);

ctx.bezierCurveTo(100,200,200,100,350,400, true);

ctx.stroke(); 

```

### transform points

Transform points in canvas coordinate to context coordinate.

Initially, the two are the same, but after for example `ctx.scale(2,2)` canvas

coordinates `(100, 100)` (i.e. 100 pixels right and 100 pixels down from 

the canvas' top left corner) becomes `(50,50)` in context coordinates.

```javascript

canvas.addEventListener("click", function(e){

    e.preventDefault();

    var x;

    var y;

    if (e.pageX || e.pageY) {

        x = e.pageX;

        y = e.pageY;

    } else {

        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

    }

    x -= cv.offsetLeft;

    y -= cv.offsetTop;

    console.log("canvas coordinates:  ", x, y);

    var pt = ctx.transformPoint(x, y);

    console.log("context coordinates: ", pt.x, pt.y);

});

```