context-2d-tracked
v2.2.2
Published
2D drawing context with pen and transform tracking
Downloads
22
Maintainers
johnsonzhongReadme
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
npm install
npm run builddemo
npm install
npm testinclude (browser)
Include dist/Context2DTracked.js in a script tag and use Context2DTracked as a global variable.
<html>
<head>
<meta charset="UTF-8">
<script src="./Context2DTracked.js"></script>
</head>
<body>
<canvas id="cv" width="600" height="600" style="border:solid black 2px"></canvas>
<script>
const cv = document.getElementById("cv");
// can use just as a global variable in the browser
const ctx = new Context2DTracked(cv.getContext("2d"));
</script>
</body>
</html>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.
const Context2DTracked = require('context-2d-tracked');trace
Print a crosshair where the pen is currently at and return the coordinates.
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.
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.
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);
});