curriculumassociates/canvas-latex

Bringing quick and beautiful math-typesetting to HTML5's canvas.

CanvasLatex

Bringing quick math-typesetting rendering to the canvas

Try it yourself

npm install

npm start

The Commands

To see a basic list of supported commands, it's recommended to look in test/selenium/expressions.yml. If you want to see their rendered results, you can do so by either running the tests, or by copy/pasting into the input field when the server is running.

This project is built on top of the open-source project KaTeX. You can find a full list of their supported functions here: https://khan.github.io/KaTeX/function-support.html. Please not that not all are supported yet.

Renderers

CanvasLatex is written in a way which should support any Canvas based renderer. The NodeBuilder creates "VirtualCanvasNodes" which are renderer agnostic models.

Currently supported renderers include:

1. CreateJS

2. PixiJS

Future renderer support could include:

1. ThreeJS (3D rendering?)

2. Node Canvas

3. FabricJS

4. Raw Canvas

API

Constructor

const widget = new Widget(latex: string, options: object)

Options

Name	Type	Default	Description
baseSize	{Integer}	44	The base font size for the latex rendering. Note: This may be larger/smaller depending on the specific latex (i.e. an exponent will render in a smaller font.
displayMode	{Boolean}	false	If true the math will be rendered in display mode, which will put the math in display style (so \int, \frac and \sum are large, for example)
debugBounds	{Boolean}	false	Displays a rectangle around the Widget's bounds.
defaultTextColor	{String}	black	Allows the default text color to be changed by specifying a string (e.g. yellow) or a hex value.
macros	{Object}	{}	A collection of custom macros. Each macro is a property with a name like \name (written "\name" in JavaScript) which maps to a string that describes the expansion of the macro. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters). The property name can map to either a string, or a function which contains a "context" argument. Example: macros: { "\\RR": "\\mathbb{R}"}
strict	{Boolean}	warn	If false or "ignore", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If true or "error" (LaTeX faithfulness mode), throw an error for any such transgressions. If "warn" (the default), warn about such behavior via console.warn. Provide a custom function handler(errorCode, errorMsg, token) to customize behavior depending on the type of transgression (summarized by the string code errorCode and detailed in errorMsg); this function can also return "ignore", "error", or "warn" to use a built-in behavior.
sizeIndex	{Number}	6	The default size index for the fonts. The size mapping is as follows: [ null, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.2, 1.44, 1.728, 2.074, 2.488 ]. The numbers represent the scale factors applied to fonts. A number of 6 maps to 1.0, a number of 7 maps to 1.2, etc.
alignment	{String}	center	The default alignment when using newlines (\newline, \, etc.). Options are 'center', 'left', 'right'.

Methods

Method	Args	Return Value	Description
getObjectsByClass	name: {String}	Array<DisplayObject>	Returns a flattened 1d array of all createjs.DisplayObject's with the specified className. For example, when calling getObjectsByClass('a') with the latex: \class{a}{ab} \class{a}{c}, the return value will be a 1d array with "a" at index 0, "b" at index 1, and "c" in index 2. The array indexes are not distinguishable based on how they appear in the latex, and thus should not be relied on.
getObjectsByClassSeparated	name: {String}	Array<Array<DisplayObject>>	Returns a 2d array of createjs.DisplayObject's separated by their className. For example, when calling getObjectsByClassSeparated('a') with the latex: \class{a}{ab} \class{a}{c}, the return value will be a 2d array with ["a", "b"] at index 0 and ["c"] at index 1. The return values are distinguishable based on how they appear separated in the latex, and can be relied on as such.

Properties

Method	Type	Description
latex	get	Returns the latex value as a string
latex	set	Re-renders with the given latex value
classes	get	Gets a full list of classes applied to the widget
distanceToBaseline	get	Gets the distance to the baseline from the top of the widget

Fonts

Loading the Fonts

Since canvas doesn't load fonts automatically, you can use the WebFontLoader. See demo/demo.js for an example. Additionally you'll need to make sure the fonts are available via the css. We leverage Katex's CSS file as it contains the fonts we need. You can use their CDN here: https://cdnjs.com/libraries/KaTeX. Or, you can include the fonts locally.

License

CanvasLatex is licensed under the MIT License. https://opensource.org/licenses/MIT

canvas-latex's Issues

"Not equal" not rendering

Hi,
I know that you say that everything is not supported yet but everything I have tried works except for the not equals sign.
Would it be possible for you to fix that?

Thanks!

npm install failed

npm install failed:

npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/rsvp-46ba9b32/LICENSE'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/create-hmac-613c5e06/index.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/pify-bc65040e/license'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/rsvp-46ba9b32/CHANGELOG.md'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/create-hmac-613c5e06/legacy.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/pify-bc65040e/readme.md'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/fd-slicer-9fa60c7f/LICENSE'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/pngjs-67291ecf/LICENSE'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/create-hmac-613c5e06/LICENSE'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/create-hmac-613c5e06/README.md'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/fd-slicer-9fa60c7f/index.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/promise-8598a487/lib/finally.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/promise-8598a487/lib/index.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/fd-slicer-9fa60c7f/.travis.yml'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/promise-8598a487/lib/node-extensions.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/fd-slicer-9fa60c7f/CHANGELOG.md'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/promise-8598a487/lib/rejection-tracking.js'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/rx-lite-6e971a2d/readme.md'
npm WARN tar ENOENT: no such file or directory, open '/home/xxx/canvas-latex-master/node_modules/.staging/promise-8598a487/lib/synchronous.js'
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/event-stream/-/event-stream-3.3.6.tgz
npm ERR! 404
npm ERR! 404 '[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'canvas-latex-master'

Minified File?

Is there a single minified file we can use with CreateJS? If it is supposed to come from some node build, could you outline the steps - and where I am supposed to find it once we run those node commands. Thanks. Looking forward to trying it out!

Update Nightwatch

The current version of nightwatch carries several issues with it. We should be able to upgrade to the latest to remove those issues.

Width check in canvas-latex

Hello,

As I want to do word wrap in canvas-latex, Is that something that can do width checking in the canvas-latex library? Thanks.

FabricJS renderer

Is there any work arround to adapt the current renderer to be used in fabricjs?

Rendering issue with text above multi-row array/matrix

There is a rendering issue when trying to render an array or matrix with some text above it. e.g.

\text{Title}\newline \begin{array}{rr} x & y\\1 & 2\\3 & 4\end{array}

This renders the 'Title' text over the top of the array. The more rows that are added to the array, the lower the title is displayed.

Thanks

Demo code not working.

I am trying to convert latex equations to canvas. But canvas-latex.js not found in the source repository. Please help me to find it.

\underbrace and \overbrace doesn't render correctly

Hi!
\underbrace and \overbrace adds an extra horizontal line which shouldn't be there.

Thanks!

`\oiint` not rendering correctly

The ring for \oiint isn't placed correctly.

In the demo:

Using commit f9a5472

Expected output with KaTeX is:

Npm Package

Is there npm package for this?

Code introduction

@ry-randall @mattbargar-cainc Sorry for nagging I just find this repo so useful.
I posted this issue before #12
If time is the problem maybe you could introduce me to the code and point to where the problem could be so I could fix it and some other problems i found?

Br