Creates a new CanvasRenderer that renders to the given rendering context.
The viewport is used to determine the translation/rotation/scaling of the content
to draw.
ProtectedbeginReturns true iff other can be rendered onto this without data loss.
Draws a styled path. If within an object started by startObject, the resultant path may not be visible until endObject is called.
Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
This is equivalent to drawPath(Path.fromRect(...).toRenderable(...)).
ProtectedendProtectedgetProtectedgetProtectedlineProtectedmoveMUST throw if other and this are not of the same base class.
This should be called whenever a new object is being drawn.
The bounding box of the object to be drawn.
Optionalclip: booleanWhether content outside _boundingBox should be drawn. Renderers
that override this method are not required to support _clip.
ProtectedtraceProtectedtrace
Renders onto a
CanvasRenderingContext2D.Example:
import {Editor,CanvasRenderer} from 'js-draw'; // Create an editor and load initial data -- don't add to the body (hidden editor). const editor = new Editor(document.createElement('div')); await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>'); ---visible--- // Given some editor. // Set up the canvas to be drawn onto. const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Ensure that the canvas can fit the entire rendering const viewport = editor.image.getImportExportViewport(); canvas.width = viewport.getScreenRectSize().x; canvas.height = viewport.getScreenRectSize().y; // Render editor.image onto the renderer const renderer = new CanvasRenderer(ctx, viewport); editor.image.render(renderer, viewport); // Add the rendered canvas to the document. document.body.appendChild(canvas);