A renderer agnostic two-dimensional drawing api for the web.

Overview

Two.js

A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.

HomeReleasesExamplesDocumentation • Change LogHelp

Usage

Download the latest minified library and include it in your html.

<script src="js/two.min.js"></script>

It can also be installed via npm, Node Package Manager:

npm install --save two.js

Alternatively see how to build the library yourself.

Here is boilerplate html in order to draw a spinning rectangle in two.js:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/two.min.js"></script>
  </head>
  <body>
    <script>
      var two = new Two({
        fullscreen: true,
        autostart: true
      }).appendTo(document.body);
      var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);
      two.bind('update', function() {
        rect.rotation += 0.001;
      });
    </script>
  </body>
</html>

Custom Build

Two.js uses nodejs in order to build source files. You'll first want to install that. Once installed open up a terminal and head to the repository folder:

cd ~/path-to-repo/two.js
npm install

This will give you a number of libraries that the development of Two.js relies on. If for instance you only use the SvgRenderer then you can really cut down on the file size by excluding the other renderers. To do this, modify /utils/build.js to only add the files you'd like. Then run:

node ./utils/build

And the resulting /build/two.js and /build/two.min.js will be updated to your specification.


Running in Headless Environments

As of version v0.7.x Two.js can also run in a headless environment, namely running on the server with the help of a library called Node Canvas. We don't add Node Canvas to dependencies of Two.js because it's not necessary to run it in the browser. However, it has all the hooks setup to run in a cloud environment. To get started follow the installation instructions on Automattic's readme. After you've done that run:

npm install canvas
npm install two.js

Now in a JavaScript file setup your Two.js scenegraph and save out frames whenever you need to:

var { createCanvas, Image } = require('canvas');
var Two = require('two.js')

var fs = require('fs');
var path = require('path');

var width = 800;
var height = 600;

var canvas = createCanvas(width, height);
Two.Utils.shim(canvas, Image);

var time = Date.now();

var two = new Two({
  width: width,
  height: height,
  domElement: canvas
});

var rect = two.makeRectangle(width / 2, height / 2, 50, 50);
rect.fill = 'rgb(255, 100, 100)';
rect.noStroke();

two.render();

var settings = { compressionLevel: 3, filters: canvas.PNG_FILTER_NONE };
fs.writeFileSync(path.resolve(__dirname, './images/rectangle.png'), canvas.toBuffer('image/png', settings));
console.log('Finished rendering. Time took: ', Date.now() - time);

process.exit();

Change Log

Two.js has been in operation since 2012. For a full list of changes from its first alpha version built with Three.js to the most up-to-date tweaks. Check out the wiki here.

Comments
  • Webpack Third Party Issues / ES6 rewrite

    Webpack Third Party Issues / ES6 rewrite

    Been battling for a couple hours with compiling using Webpack, which is related to https://github.com/jonobr1/two.js/issues/171.

    The built file throws errors on the third party modules, the biggest problem being that they are defined on this for each module, which Webpack won't allow you to write properties to. Because Webpack doesn't preserve the names of imports, importing the modules individually doesn't resolve the issue either, as the built two.js expects specific names. Importing two.js, two.clean.js, or two.min.js all throw the same error.

    Converting two.js to use ES6 / UMD will make it universally accessible to different browser environments, but I don't see me being able to do anything tangible for the next few months. What I can do for now is point to strategies for doing this effectively.

    Inspiration

    React Router is an excellent source for inspiration on how to build a project for multiple environments. It's a good idea to npm install React Router and take a look at the built files in the es6, lib, and umd folders to see the results of how files are built for the different environments.

    1. All modules are imported through index.js
    2. External dependencies are imported as peer dependencies to prevent having to manage versioning and updating of those deps as they grow in their own projects: package.json | webpack
    3. Building runs 3 npm scripts concurrently, for CommonJS, ES6, and UMD
    4. Each npm script is responsible for building to its different environment, including minification, using either Babel (ES6 and CommonJS), or Webpack (UMD).
    5. A release script is manually run after updates to automate versioning, tagging, pushing, and publishing to NPM

    The workflow is pretty extensive, but once setup (or pretty much copied) from React Router's, everything will be pretty automatic. The bulk of the work will come down to refactoring modules to be written in ES6 syntax, which will mostly come down to importing deps at the top of the files, and removing the IIFE wrapping those deps.

    For building to CommonJS and UMD, this is an excellent article: It's Not Hard: Making Your Library Support AMD and CommonJS. UMD ensures that a full build is available as a browser global, CommonJS module, or AMD module - Webpack does this for us, though.

    Temporary Solution

    As a side note, a quick solution to importing two.js in a module with Webpack follows, though it requires a custom build of the script (and some testing).

    // my-module.js
    import Two from 'two.js';
    ...
    
    // custom two.js/build/two.js
    window._ = require('../third-party/underscore');
    window.requestAnimationFrame = require('../third-party/requestAnimationFrame.js');
    window.Backbone = {};
    window.Backbone.Events = require('../third-party/events.js');
    ...
    
    // webpack config
    
    ...
      module: {
        loaders: [
          ...
          // 'this' is undefined in 'strict' mode when building with babel loader.
          // let's ensure 'this' references the window object, required for this._, 
          // this.Backbone etc. in two.js
          {
            test: require.resolve('my-custom-two.js'),
            loader: 'imports?this=>window',
          },
          ...
        ],
      },
    ...
    

    I'm a little baffled as to why no one else has brought up any problems with imports and Webpack, so if anyone can provide me with a working example it'd be much appreciated.


    EDIT: Monkey patched a Webpack-friendly 'build' based on the clean build here: https://github.com/fixate/two.js/blob/webpack-monkeypatch/build/two.svg.webpack.js Contains only the svg renderer.

    This monkey patched file can be imported straight into a module without any Webpack configuration, and removes _ and Backbone from the global space.

    bug enhancement 
    opened by larrybotha 31
  • Suggestion: Image example

    Suggestion: Image example

    I would love to see one or more examples of rendering images with different renderers, though I'm mostly interested in WebGL renderer.

    It's always raster versus vector when in comes to renderers. If two.js is really a great solution for both, it can grow immensely in popularity. I personally don't know the correct way to use two.js for images.

    enhancement 
    opened by drkibitz 30
  • React Wrapper for two.js?

    React Wrapper for two.js?

    Is anyone aware of a React wrapper for two.js? I'm thinking of something roughly like the following:

    render() {
      return (
        <div>
          <Line x1={10} y1={20} x2={30} y2={40} width={2} color='#ff33cc'/>
          <Circle x={this.props.cx} y={this.props.cy} r={this.props.r} />
        </div>
      );
    }
    

    Essentially just thin wrapper components over the two.js calls to give you a declarative interface that lets you work with the normal React lifecycle.

    I can't find anything like this, but it would be nice IMO. I suppose that since two.js maintains its own internal representation that this would require a custom React backend like the ReactDOM or React Native to generate the equivalent of the virtual DOM and do the diffing.

    p.s. I've seen the examples of using React with two.js, but they are not simple functions from state to views like a good React component should be.

    enhancement 
    opened by mindjuice 28
  • SVG interpreter

    SVG interpreter

    When I import SVGs using the two.interpret, as in the two.js example, the polygon fill is set to #fff. Is this always the case?

    Also, I noted that when round holes are imported (using two.interpret) they seem to be missing the closing anchor in the polygon. For rectangular holes the import works fine.

    bug 
    opened by ghost 28
  • Two.Vector performance qualms

    Two.Vector performance qualms

    In an application I am toying with, almost 90% of my application time is spent in Backbone.js as a result of the x and y setters in Two.Vector.

    Is this intentional?

    In my case, removing these events firing solved my problem with no ill effect, but it still seemed a bit strange.

    enhancement 
    opened by dcousens 28
  • Matrix transformations aren't interpreted correctly

    Matrix transformations aren't interpreted correctly

    When I try to interpret an svg with transformation="matrix(... it renders very strangely then how it should render. I've tried using the dev branch with no luck. It appears as though the math for rotating is off. The shape should be rotated by about 45 degrees but it's rotated by nearly 0. It's also offset by quite a bit. I've verified that chrome renders the shape correctly and it's when it's interpreted that things go wrong. This occurs in both svg and canvas mode. Here is the input

    <g style="opacity:1; fill:none; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
        <path d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" style="fill:#000000; stroke:#000000;" />
        <path d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10" style="fill:#000000; stroke:#000000;" />
        <path d="M 9.5 25.5 A 0.5 0.5 0 1 1 8.5,25.5 A 0.5 0.5 0 1 1 9.5 25.5 z" style="fill:#ffffff; stroke:#ffffff;" />
        <path d="M 15 15.5 A 0.5 1.5 0 1 1 14,15.5 A 0.5 1.5 0 1 1 15 15.5 z" transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)" style="fill:#ffffff; stroke:#ffffff;" />
        <path d="M 24.55,10.4 L 24.1,11.85 L 24.6,12 C 27.75,13 30.25,14.49 32.5,18.75 C 34.75,23.01 35.75,29.06 35.25,39 L 35.2,39.5 L 37.45,39.5 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 C 31.88,13.17 28.46,11.02 25.06,10.5 L 24.55,10.4 z" style="fill:#ffffff; stroke:none;" />
    </g>
    

    And here is the output svg after being interpreted

    <g id="two-184" transform="matrix(1.977 0 0 1.977 142.5 53.5)" opacity="1">
        <g id="two-185" transform="matrix(1 0 0 1 -22.015 -23)" opacity="1">
            <path transform="matrix(1 0 0 1 26.514 24.5)" d="M -4.515 -14.5 C 5.985 -13.5 11.985 -6.5 11.485 14.5 L -11.515 14.5 C -11.515 5.5 -1.515 8 -3.515 -6.5 " fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-width="1.5" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-186"></path>
            <path transform="matrix(1 0 0 1 15.008 19.016)" d="M 8.991 -1.017 C 9.371 1.893 3.441 6.353 0.991 7.983 C -2.009 9.983 -1.829 12.323 -4.009 11.983 C -5.051 11.043 -2.599 8.943 -4.009 8.983 C -5.009 8.983 -3.819 10.213 -5.009 10.983 C -6.009 10.983 -9.012 11.983 -9.009 6.983 C -9.009 4.983 -3.009 -5.017 -3.009 -5.017 C -3.009 -5.017 -1.119 -6.917 -1.009 -8.517 C -1.739 -9.511 -1.509 -10.517 -1.509 -11.517 C -0.509 -12.517 1.491 -9.017 1.491 -9.017 L 3.491 -9.017 C 3.491 -9.017 4.271 -11.009 5.991 -12.017 C 6.991 -12.017 6.991 -9.017 6.991 -9.017 " fill="#ffffff" stroke="rgb(0, 0, 0)" stroke-width="1.5" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-187"></path>
            <path transform="matrix(1 0 0 1 9 25.5)" d="M 0.5 0 A 0.5 0.5 0 1 1 -0.5 0 A 0.5 0.5 0 1 1 0.5 0 Z " fill="#000000" stroke="rgb(0, 0, 0)" stroke-width="1.5" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-188"></path>
            <path transform="matrix(0.865 -0.008 0.007 0.865 24.193 10.326)" d="M 0.5 0 A 0.5 1.5 0 1 1 -0.5 0 A 0.5 1.5 0 1 1 0.5 0 Z " fill="#000000" stroke="rgb(0, 0, 0)" stroke-width="1.5" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" id="two-189"></path>
        </g>
    </g>
    
    bug 
    opened by Bunabun 22
  • Breaks on Web worker because it uses window instead of self

    Breaks on Web worker because it uses window instead of self

    Hi Jono, Your library looks promising and I'm eager to use it for rendering to canvas and mostly to WebGL. However, I render my canvas in a web worker using OffscreenCanvas, and it seems that this library breaks down in that environment because it makes too many assumptions. I've been trying for a while to get this to work.

    One of the main issues is that window is assumed to be defined, as you assign either "window" or "global" to root. If you'd use "self" instead of, or as alternative to, "window", it would work fine in a web worker.

    The library also tries to access the document in other places. For example, in line 4922 and 7961, it says: canvas = (root.document ? root.document.createElement('canvas') : { getContext: _.identity });

    Why don't you use the domElement here? Creating the canvas element fails in the worker, and then it ends up with the identity context, so that later, the library does calls like .clearRect() on the string '2d', which fails. I am also confused why the 2d rendering context is used to clear the canvas when the rendering is explicitly set to WebGL? It seems some kind of combination between 2d and WebGL context is used. Could you help me understand what's going on there, and what I could do to make it work without creating new elements in the library?

    Thanks for your help! Micha

    enhancement 
    opened by michaschwab 21
  • Modules plus docs

    Modules plus docs

    As promised, here are the changes from both my modules PR and the jsdocs branch. I've made these changes in a different branch from #425 just in case.

    I'm not really sure which branch this should be merged into, so I went with jsdocs. This will probably be nearly impossible to manually merge into jsdocs, so you may want to replace jsdocs with this branch or just create a new branch instead.

    The docs are still a tad broken--if you want me to take another pass over them before merging, I can do so, but this is a big complicated PR as is, so I think it'd be best to do that in another PR.

    opened by adroitwhiz 19
  • Incorrect SVG loading/interpreting

    Incorrect SVG loading/interpreting

    I have the following two external SVG's

    Left arm left

    Right arm right

    However, after being loaded with two.load, this is the result

    image

    This is the result with only the two arms rendinger image

    I have tried both two.load and two.interpret, and I've also tried Two.Types.canvas and Two.Types.svg (prefer canvas, but tried both for completeness).

    This is the SVG content for leftarm

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 170.68"><title>leftarm</title><path d="M161.38,116h0v0a20.51,20.51,0,0,1-16.73,23.69L56.2,155a20.51,20.51,0,0,1-23.67-16.73l-2.95.51a10.28,10.28,0,0,1-11.85-8.37h0a10.28,10.28,0,0,1,8.36-11.84l13.14-2.22L39,115.09q-.09-.51-.12-1a10.27,10.27,0,0,1,9.5-11,10.47,10.47,0,0,1,10.88,8.8l.16.92L137.7,99.34A20.5,20.5,0,0,1,161.38,116Z" fill="#f8b195"/></svg>
    

    When using Two.Types.svg, we can expect the resulting SVG, which gives me this

    <g id="two_200" transform="matrix(1 0 0 1 149 290)" opacity="1"><path transform="matrix(1 0 0 1 0 0)" d="M 71.755 -11.167 L 71.755 -11.167 L 71.755 -11.167 L 71.755 -11.167 L 72.022 -6.583 L 71.263 -2.054 L 69.515 2.193 L 66.866 5.943 L 63.448 9.011 L 59.434 11.242 L 55.025 12.523 L 55.025 12.523 L -33.425 27.833 L -33.425 27.833 L -38.006 28.096 L -42.531 27.334 L -46.774 25.585 L -50.521 22.936 L -53.586 19.521 L -55.814 15.509 L -57.095 11.103 L -57.095 11.103 L -60.045 11.103 L -60.045 11.103 L -62.337 11.233 L -64.601 10.85 L -66.724 9.975 L -68.599 8.65 L -70.134 6.943 L -71.251 4.937 L -71.895 2.733 L -71.895 2.733 L -71.895 2.733 L -71.895 2.733 L -72.023 0.444 L -71.64 -1.817 L -70.766 -3.937 L -69.443 -5.811 L -67.738 -7.344 L -65.736 -8.461 L -63.535 -9.107 L -63.535 -9.107 L -50.395 -11.327 L -50.625 -12.077 C -11.625 103.013 -50.715 -12.587 -50.745 -13.077 L -50.745 -13.077 L -50.656 -15.377 L -50.058 -17.6 L -48.979 -19.633 L -47.474 -21.375 L -45.62 -22.738 L -43.508 -23.654 L -41.245 -24.077 L -41.245 -24.077 L -41.085 -24.077 L 48.075 -27.827 L 48.075 -27.827 L 52.65 -28.097 L 57.17 -27.344 L 61.411 -25.606 L 65.159 -22.969 L 68.228 -19.565 L 70.464 -15.564 L 71.755 -11.167 L 71.755 -11.167 Z " fill="#f8b195" stroke="transparent" stroke-width="1" stroke-opacity="1" fill-opacity="1" class="" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="two_201"></path></g>
    

    Is this an error with the SVG file or is the path translation being funky?

    bug question 
    opened by Neglexis 19
  • Feature :: Add DOM events in objects

    Feature :: Add DOM events in objects

    Add DOM events in Objects

    Events supported

    SVG: click, mousedown, mouseup, mouseover, mouseout Canvas: mousedown, mouseup WebGL: in progress

    Example

    var two = new Two({
                fullscreen: true,
                autostart: true,
                type: Two.Types.canvas
            }).appendTo(document.body);
    var path = [
                new Two.Vector(50,50),
                new Two.Vector(50,60),
                new Two.Vector(60,50),
                new Two.Vector(60,50),
                new Two.Vector(70,60),
                new Two.Vector(70,30),
                new Two.Vector(50,50)
            ];
    var polygon  = two.makePolygon(path, true);
    
    polygon.on('mousedown', function(){ console.log('WIN! polygon mousedown') });
    polygon.on('mouseup', function(){ console.log('WIN! polygon mouseup') });
    
    enhancement 
    opened by jimmy-collazos 19
  • [Bug] Cannot import two.js in typescript project

    [Bug] Cannot import two.js in typescript project

    Describe the bug I guess this is a continuation of #526. The generated types in [email protected] don't work right off the bat. At least not with the default create-react-app typescript setup.

    To Reproduce Steps to reproduce the behavior:

    1. npx create-react-app twojs-demo --template typescript
    2. cd twojs-demo
    3. npm i [email protected]
    4. Replace src/App.tsx with the following:
    import { useEffect } from 'react';
    import Two from 'two.js'
    
    function App() {
      useEffect(() => {
        const two = new Two({
          fullscreen: true,
          autostart: true,
        })
    
        const container = document.getElementById('container');
        if (container) two.appendTo(container)
    
        var rect = two.makeRectangle((two as any).width / 2, (two as any).height / 2, 50 ,50);
          (two as any).bind('update', function() {
            rect.rotation += 0.001;
          });
      }, [])
    
      return (
        <div id='container' />
      );
    }
    
    export default App;
    
    1. Observe the error: File 'twojs-demo/node_modules/two.js/types.d.ts' is not a module.

    Potential fix Modify node_modules/two.js/types.d.ts with the following changes:

    - declare namespace Two {
    + declare module 'two.js' {
    +   export default Two;
    
    ...
    

    Reload the dev server or resave App.tsx to enact HMR. The code should run with no problems.

    Notes

    Besides not being able to import two.js, the type definitions were lacking the .width, .height, and .bind attributes of a new Two() instance. That's why the App.tsx casted (two as any). There might be other small problems like that.

    I never used the jsdoc typescript generator, but perhaps there is a way to switch to declare module instead of declare namespace? I think 'module' is more modern in typescript (I would have to double-check).

    Additionally, there should be a new version of @types/two.js to mention that that package is just a stub file since you are including types here. I can open a PR over there if you are ready to take that step.

    bug 
    opened by nmay231 18
  • [Bug] Text rendering in headless mode incorrect size

    [Bug] Text rendering in headless mode incorrect size

    Describe the bug The text rendering is inconsistent between web and node canvasses.

    To Reproduce I've created a separate repo to reproduce the issue. It can be found here: https://github.com/laurentvd/isomorphic-text-rendering-bug

    Expected behavior I'd expect the HTML canvas to look exactly the same as the generated image from node-canvas. However, the text is rendered much smaller in the headless canvas.

    Screenshots

    HTML canvas: image

    Node canvas: canvas

    Environment (please select one):

    • [x] Code executes in browser (e.g: using script tag to load library)
    • [ ] Packaged software (e.g: ES6 imports, react, angular, vue.js)
    • [x] Running headless (usually Node.js)

    Desktop (please complete the following information):

    • OS: MacOS Big Sur
    • Browser Any
    • Version Any
    bug 
    opened by laurentvd 0
  • Why is Webgl slower than Canvas?

    Why is Webgl slower than Canvas?

    I was playing around with your example here: https://codepen.io/jonobr1/pen/QWZZEQ And was surprised that switching to "Two.Types.webgl" performed significantly worse.

    I tried updating to the latest (which fixed the graphical issues), but the performance is still pretty slow compared to Canvas. https://codepen.io/tylandercasper/pen/JjZLMeP

    Curious as to why this is.

    Thanks

    question 
    opened by tylandercasper 1
  • [Enhancement] Make Canvas Invocations of measureText Node Canvas Compliant

    [Enhancement] Make Canvas Invocations of measureText Node Canvas Compliant

    Is your feature request related to a problem? Please describe. Two.js uses context.measureText from HTML5 <canvas /> tags to know what the width of a set of rendered text is in Two.Text.getBoundingClientRect.

    This works in the browser, but not in headless environments

    Describe the solution you'd like node-canvas is the defacto Canvas feature for node.js and one recommended for use with Two.js on its own documentation page. So, the measureText code in Two.Text should work with node-canvas as well as the browser.

    This issue is based on the conversation here: https://github.com/jonobr1/two.js/issues/668

    enhancement 
    opened by jonobr1 0
  • [Enhancement] Use URL API for Making Textures' Sources Absolute Paths

    [Enhancement] Use URL API for Making Textures' Sources Absolute Paths

    Is your feature request related to a problem? Please describe. Two.js creates a texture registry so that multiple image elements aren't created for the same asset. To point to canonical versions of an image Two.js creates and stores a private <a /> tag and sets the href attribute to a given texture. The default browser behavior is to expand a resource's path from relative to absolute.

    This works in the browser, but not in headless environments

    Describe the solution you'd like Use the URL API instead of <a /> tags and look to see if Two.js is loaded in a browser or headless environment to expand URLs (in the case of browser) or not (in the case of headless).

    This issue is based on the conversation from this issue: https://github.com/jonobr1/two.js/issues/668

    enhancement 
    opened by jonobr1 0
  • [Bug] features not working properly on Two.Texture obj

    [Bug] features not working properly on Two.Texture obj

    Describe the bug After creating a texture neither the texture.scale, nor the texture.className, nor the texture.image.style features do a thing on the texture...

    To Reproduce Steps to reproduce the behavior:

    1. Create a texture: tex = new two.Texture('[image-url]')
    2. apply it to an object: rect.fill = tex
    3. modify the texture: tex.scale = 0.5
    4. the texture is not changed

    Expected behavior for the texture to change according to either the className or modifying it.

    Screenshots here I scale it to the canvas width and move it to the center: image then when I resize the window, the image should resize: image but as you can see here, the image seems to be resized but it's not, you can see it tilling when it should be smaller: image

    Environment (please select one):

    • [X] Code executes in browser (e.g: using script tag to load library)
    • [ ] Running headless (usually Node.js)
    • [ ] Packaged software (e.g: ES6 imports, react, angular, vue.js)

    Desktop (please complete the following information):

    • OS: [Windows]
    • Browser [Brave]
    • Version [Version 1.44.101 Chromium: 106.0.5249.65 (Official Build) (64-bit)]

    Smartphone (please complete the following information):

    • Device: [Nokia 6.1]
    • OS: [Android 10]
    • Browser [Brave]
    • Version [1.43.93, Chromium 105.0.5195.127]

    Additional context the texture.repeat doesn't work either... it should by default not repeat, but as you can see in the screenshots it repeats... the image used is from another web page, not loaded locally... I'm applying the texture to a path.stroke...

    bug 
    opened by joex92 1
  • [Enhancement] Move types for

    [Enhancement] Move types for "Extras" outside of main types.d.ts

    Is your feature request related to a problem? Please describe. The main types.d.ts currently has types for Two.ZUI, but not types for Two.Arc. This is because adding them creates conflicts for the documentation with Two.ArcSegment. Also, perhaps there isn't a need to bloat the types.d.ts file with information that developers may not use.

    Describe the solution you'd like Create a system / rule for defining types of modules in the /extras folder.

    Additional context See how other libraries handle this, like Three.js

    enhancement 
    opened by jonobr1 0
Releases(v0.8.10)
  • v0.8.10(May 31, 2022)

    What's Changed

    • Fix Star Rendering by @jonobr1 in https://github.com/jonobr1/two.js/pull/641
    • Added module.exports to UMD Files by @jonobr1 in https://github.com/jonobr1/two.js/pull/644
    • Fix Two.Polygon by @mmz-001 in https://github.com/jonobr1/two.js/pull/631
    • Fixes Omissions in TypeScript Types by @jonobr1 in https://github.com/jonobr1/two.js/pull/637
    • Added Two.Arc by @jonobr1 in https://github.com/jonobr1/two.js/pull/638

    New Contributors

    • @mmz-001 made their first contribution in https://github.com/jonobr1/two.js/pull/631

    Full Changelog: https://github.com/jonobr1/two.js/compare/v0.8.7...v0.8.10

    Source code(tar.gz)
    Source code(zip)
  • v0.8.7(Apr 29, 2022)

    What's Changed

    • Fix Documentation link by @DominicTobias in https://github.com/jonobr1/two.js/pull/623
    • Fixed Two.Path.ending when Two.Path.curved = true by @jonobr1 in https://github.com/jonobr1/two.js/pull/626
    • [Issue 621] Fix Two.Text Public Properties by @jonobr1 in https://github.com/jonobr1/two.js/pull/627

    New Contributors

    • @DominicTobias made their first contribution in https://github.com/jonobr1/two.js/pull/623

    Full Changelog: https://github.com/jonobr1/two.js/compare/v0.8.5...v0.8.7

    Source code(tar.gz)
    Source code(zip)
  • v0.8.5(Mar 30, 2022)

    What's Changed

    • Breaking: Added export maps so extras are imported like so import { ZUI } from 'two.js/extras/zui.js'
    • Added Two.Gradient parent parameter to Two.Stop.clone
    • Added constructor definitions to types for higher order shapes
    • Fix vector dot product documentation name by @Awkor in https://github.com/jonobr1/two.js/pull/604
    • Add more handy vector references by @Awkor in https://github.com/jonobr1/two.js/pull/607
    • Add radius property to polygon class by @Awkor in https://github.com/jonobr1/two.js/pull/611
    • Added Export Maps to Repository by @jonobr1 in https://github.com/jonobr1/two.js/pull/615

    New Contributors

    • @Awkor made their first contribution in https://github.com/jonobr1/two.js/pull/604

    Full Changelog: https://github.com/jonobr1/two.js/compare/v0.8.3...v0.8.5

    Source code(tar.gz)
    Source code(zip)
  • v0.8.3(Jan 29, 2022)

    Author Notes

    • Improved Two.Element.className construction
    • Reintroduced TypeScript Type Declarations from manually

    What's Changed

    • TypeScript Type Declarations Improvements by @jonobr1 in https://github.com/jonobr1/two.js/pull/602
    • Improved Flagging for Class Names by @jonobr1 in https://github.com/jonobr1/two.js/pull/603

    Full Changelog: https://github.com/jonobr1/two.js/compare/v0.8.2...v0.8.3

    Source code(tar.gz)
    Source code(zip)
  • v0.8.2(Jan 19, 2022)

    Author Notes

    • Improved types declarations
    • Added Shape.worldMatrix
    • Allowed string interpretation on Two.Utils.read.path
    • Removed ES6+ specific features: private variables

    What's Changed

    • Update path.js by @dickinson0718 in https://github.com/jonobr1/two.js/pull/583
    • Added Shape.worldMatrix Property by @jonobr1 in https://github.com/jonobr1/two.js/pull/594

    Full Changelog: https://github.com/jonobr1/two.js/compare/v0.8.0...v0.8.2 & https://two.js.org/change-log/

    Source code(tar.gz)
    Source code(zip)
  • v0.8.0(Jan 10, 2022)

    Version 0.8.0 introduces a port of the previously EcmaScript 5 syntax and brings it to modern day JavaScript coding practices with EcmaScript 6 features supported in all major browsers.

    📋 This is a more-or-less entire rewrite of Two.js to use EcmaScript 6 features. In particular:

    • const / let instead of var for tighter scoping
    • class construction instead of prototypical modifications
    • Expanded classification of classes. For instance:
      • Two.Events is now a class
      • Two.Element is a new base class of Two.Shape, Two.Gradient, and anything else that can be queried in the scenegraph
    • Where possible functions are named instead of anonymous
    • Removes all MakeObservable methods in favor of Object.defineProperty invocations on constructor
    • Module imports are through typical exports and except for the root Two.js class, not with default. So you'll need to import specific modules like so:
    import { Vector } from 'two.js/src/vector.js';
    var v = new Vector();
    

    🏁 These changes allow for improved:

    • TypeScript Declarations (fully expanded and invoked through TypeScript's types compiler)
    • Improved documentation
    • Code legibility and OOP style
    • More legible performance debugging
      • Easier to identify culprit functions in Chrome et al. performance debug consoles
    • And improved SVG interpretation

    ⚠️ These changes break:

    • Loose interoperability between Two.Vector and Two.Anchor. For any curve, it's required you use anchors instead of vectors now.

    🗒️ All tests and first party examples are passing with documentation updated on two.js.org/docs

    Source code(tar.gz)
    Source code(zip)
  • v0.7.13(Dec 15, 2021)

    Minor enhancements to Two.Gradient and Two.interpret including:

    • Improved SVG gradient interpretation
    • Two.interpret can properly unwrap CSS url() commands
    • Added Two.Gradient.units and respected in all renderers
    • Default units space for Two.Gradient is objectBoundingBox
    • Removed destructive attribute assignments in Two.interpret
    • Interpreted gradients are reused as <defs />
    Source code(tar.gz)
    Source code(zip)
  • v0.7.12(Nov 24, 2021)

    Fixed setting Two.Group.mask and Two.Path.mask to null, effectively removing or deleting a mask and improved adaptability of Two.Points.vertices.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.10(Nov 20, 2021)

  • v0.7.9(Nov 20, 2021)

  • v0.7.8(Jul 14, 2021)

    Created a shim version of TypeScript type definitions so that TypeScript projects can run Two.js without errors (though there is not code hinting yet).

    Source code(tar.gz)
    Source code(zip)
  • v0.7.7(Jul 14, 2021)

  • v0.7.6(Jul 10, 2021)

    Minor stability improvements in both client side and headless environments to Two.js. This includes:

    • Improved SVG interpretation
    • id assignment in all objects
    • Two.Path.vertices generation

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.5(May 25, 2021)

    Minor stability improvements in both client side and headless environments to Two.js. This includes:

    • Improved Typescript Declaration Types
    • Improved getBoundingClientRect calculations
    • Improved higher order primitive usability

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.4(Apr 2, 2021)

    Minor stability improvements in both client side and headless environments to Two.js. This includes:

    • Improved Typescript Declaration Types
    • Improved extras/ JavaScript and JavaScript Module accessing
    • Added Two.Shape.skewX and Two.Shape.skewY

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.3(Mar 26, 2021)

    Minor stability improvements in both client side and headless environments to Two.js. This includes:

    • Improved two.interpret performance
    • Improved Two.Group.visible performance
    • Added Typescript Declaration Types
    • Created both JavaScript and JavaScript module versions of the /extras directory for convenient use in both global and module development environments

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.1(Jan 13, 2021)

    Minor stability improvements in both client side and headless environments to Two.js. This includes:

    • Better class name implementation
    • Text support for two.interpret and two.read
    • Scientific notation for two.interpret and two.read methods
    • <use /> tags for two.interpret and two.read methods
    • fitted boolean which matches a Two.js canvas to its parent DOM element
    • ES6 style import compatible with Two.js classes (as modules)

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Jan 22, 2020)

    Major stability improvements in both client side and headless environments to Two.js. This includes importing from npm and into frameworks such as React, Vue, and Angular. v0.7.0 is still written in ES5, but is now forward compatible with ES6 imports. Also:

    • /extras/ folder added for additional scripts that work in tandem and assume the Two.js namespace
    • Two.Matrix performance improvements
    • SVG interpretation improvements
    • Shorthand for two.makeArrow
    • Two.Path.dashes for stroked dashes

    See changelog for a full list of additions.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.0-beta.3(Dec 8, 2018)

  • v0.7.0-beta.2(Nov 18, 2018)

  • v0.7.0-beta.1(Nov 3, 2018)

    Two.js now supports dashes on Two.Path and Two.Text. Improved cloning, segmentation through beginning and ending properties, and SVG interpretation. Initial introduction of Two.Commands.arc. ES6 module support has been added at /build/two.module.js. This is a prerelease candidate and while the API isn't planning to change the implementation of bitmap functionality is incomplete (i.e: the WebGLRenderer hasn't been fully implemented yet) and all tests have yet to be written for new functionality. For a full list of changes see the change log.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.0-alpha.1(Dec 1, 2017)

    Two.js now supports rendering bitmap imagery in the SvgRenderer and CanvasRenderer through the underlying Two.Texture class. Dynamically add and manipulate images, animated gifs, and even videos to your Two.js scene. This is a prerelease candidate and while the API isn't planning to change the implementation of bitmap functionality is incomplete (i.e: the WebGLRenderer hasn't been fully implemented yet). In addition to this introduction, third party libraries have been completely removed and Two.js is now compatible with headless development. For a full list of changes see the change log.

    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Feb 9, 2016)

    Two.js now supports text rendering through the Two.Text property. Dynamically add web enabled fonts two your two.js scene. Check the examples page for usage. In addition to this there are updates to how third party libraries are imported to be compatible with latest versions of require.js and other minor bug fixes.

    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(Oct 1, 2015)

    This version has major breaking changes. What was Two.Polygon is now Two.Path and Two.Polygon is a subset of Two.Path. Added gradient support for all renderers. Changed the Two.Group.children property to a Two.Collection to access like an array. ASM loading for non-browser loads. Performance updates.

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0-alpha(Jan 8, 2014)

Owner
Jono Brandel
I mix two fundamental disciplines, Graphic Design and Computer Programming, to explore the expressive qualities of technology.
Jono Brandel
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

dc.js Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attribut

null 7.4k Nov 22, 2022
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Nov 21, 2022
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Nov 25, 2022
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Nov 16, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Nov 23, 2022
Perfect pressure-sensitive drawing for both iOS and Android.

rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Inst

Robert Soriano 70 Nov 7, 2022
Different Widgets: Accordion, Search from Wikipedia(Wiki API), DropDown, Translate(Google API)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Nikita Kavtsevich 1 Dec 19, 2021
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Nov 23, 2022
An object-oriented API for business analytics

dimple Dimple is an object-oriented API allowing you to create flexible axis-based charts using d3.js. The intention of this project is to allow analy

AlignAlytics 2.7k Nov 16, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Nov 22, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 958 Nov 21, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
Create PowerPoint presentations with a powerful, concise JavaScript API.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Brent Ely 1.8k Nov 26, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
Processing Foundation 18.4k Nov 24, 2022
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Nov 12, 2022
Composable data visualisation library for web with a data-first approach now powered by WebAssembly

What is Muze? Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It

Charts.com 1.2k Nov 15, 2022
Mini map for web pages.

pagemap Mini map for web pages. Example usage add a canvas tag to your HTML page: <canvas id='map'></canvas> fix it's position on the screen: #map {

Lars Jung 1.2k Nov 21, 2022