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(...)).
Returns a reference to the underlying CanvasRenderingContext2D.
This can be used to render custom content not supported by AbstractRenderer.
However, such content won't support SVGRenderer or TextOnlyRenderer
by default.
Use with caution.
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);