It would be great if there was an option to eliminate randomness when drawing shapes. So basically that the first time it would be random, and then the same shape would be drawn again.

For example drawing lines on canvas and then redrawing the entire canvas causes the lines to flicker due to randomness.

I would be willing to work on this as a PR, if you think it's a good idea.

When using this library in node, rendering a polygon with a transparent fill fails with Cannot read property 'appendChild' of null. It originates on this line which was built from this line in svg.ts.

When it tries to run this.defs!.appendChild(pattern);, this.defs is null, so it fails. I'm not familiar with typescript, so I'm not sure what the exclamation mark is for , but skipping this assignment when this.defs === null fixes the error.

For reproduction, I'm attempting to rendering the following polygon:

// Coordinates
[ [ 50, 160 ],
  [ 55, 180 ],
  [ 70, 180 ],
  [ 60, 190 ],
  [ 65, 205 ],
  [ 50, 195 ],
  [ 35, 205 ],
  [ 40, 190 ],
  [ 30, 180 ],
  [ 45, 180 ] ]

// Options
{ stroke: 'green', fill: 'transparent', strokeWidth: 5 }

Circle, ellipse and rectangle do not have this issue, but path crashes with the same error. Let me know if you need more information.

Versions [email protected] [email protected]

I am trying to use roughjs with webpack. (Actually using webpacker, as main app is a Rails application)

I have tried using rough.svg and rough.canvas, and I end up getting this error (or the same for canvas) every time:

TypeError: roughjs_dist_rough__WEBPACK_IMPORTED_MODULE_0___default.a.svg is not a function

from this:

import rough from "roughjs/dist/rough";
  return {
    bgFrame: (element) => {

      let svgBg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
      **const rs = rough.svg(svgBg);**
      let frameWidth = element.width;
      let frameHeight = element.height;
      let node = rs.rectangle(0, 0, frameWidth, frameHeight, {fill: "red"}); 
      svgBg.appendChild(node);
    }
  }
}) ();
export default frame

called here:

 [...document.querySelectorAll('img.frame')].forEach(
    (image) => {
      frame.bgFrame(image)
    }
  )

I have tried several variations on this without luck. I can create an svg without roughjs, and add it to the document.

Thanks for any thoughts on where I am going wrong.

Hi!

First of all, thanks for creating this package 😄

I had some trouble getting rough.js to work on a create-react-app / Typescript setup.

When importing rough.js using import rough from "roughjs/bundled/rough.esm.js", I got this error:

Could not find a declaration file for module 'roughjs/bundled/rough.esm.js'. '/Users/francisco/dev/puzzle-game/node_modules/roughjs/bundled/rough.esm.js' implicitly has an 'any' type. Try npm install @types/roughjs if it exists or add a new declaration (.d.ts) file containing declare module 'roughjs/bundled/rough.esm.js'; TS7016

I'm a beginner with TypeScript, so I'm not sure what would be the best solution to fix that, but it seems that adding the following file solves the issue.

roughjs/bundled/rough.esm.d.ts

declare module "roughjs/bundled/rough.esm.js" {
  import rough from "roughjs/bin/rough";
  export default rough;
}

I'm assuming similar files could be created for the other bundles as well.

Would you be open to a PR for this change ? or do you think there is a better way of solving the issue?

Hello @pshihn, thank you for this great contribution 👯 👏

Since version 2.2.0, which introduce async methods, I'm not being able to build the library inside angular 6 app. I do not provide OS and versions information because the issue reside on types of RoughCanvasAsync (promise of...) not matching the implemented class RoughCanvas.

Here you could see an evidence

Perhaps use https://github.com/ipython/xkcd-font or https://fonts.google.com/specimen/Amatic+SC

Ideally should be able to configure the font, but using one of these two as a default. Will work with Canvas and SVG.

Also, see: https://bl.ocks.org/aaizemberg/76b00a3aa08d7161b980d915db6a85a2

Hiya!

I'm trying to use rough.js with canvas-sketch; the only part of this that matters is that canvas-sketch lets me use inches as the canvas unit, rather than pixels (and it does the inches-> pixels conversion behind the scenes). For most options this is fine; for ex this is a hashed rectangle of 5x5 inches,

const rect = rc.rectangle(1, 1, 5, 5, {
      fill: 'black',
      fillWeight: 0.05, 
      hachureGap: 0.5,
      roughness:0.1,
    });

And it looks about what you'd expect (if maybe with slightly wider lines than expected):

When I switch the fill to "dots" however, the dots go really wild:

I assume this is happening because there's some internal math that assumes pixels, but before I go digging where to fix that locally, I was wondering if you had any advice of where to look? Or any hacks to just scale the dots down more (that isn't "stop using inches :sob:")? The fillWeight seems to be getting ignored in my case, or somehow scaled in the library maybe? (0.05 inches should be a very small radius, but if i crank up the hachure gap to 3 inches soIid just get fewer dots, it still looks wrong and not like a teensy circle:

I'm sorry for the edge case! Thanks in advance! 🙏

There's a recent regression in Skia (Chromium 94.x+) in how it renders stuff when the SVG uses floating points and linecap is set to round, resulting in really annoying bugs https://github.com/excalidraw/excalidraw/issues/4046.

Reported to crbug https://bugs.chromium.org/p/chromium/issues/detail?id=1266390, but the fix may take a while.

Can rough support rounding floating point numbers to get around this in the meantime?

it looks like the pattern scales with the rectangle until it's 200x200 then it gets capped. See gif above. Also, the render time increases dramatically after 200x200. See gif. I'm just rendering a simple rectangle with fillStyle = 'dots'

In the documentation, the default values for fillWeight, hachureGap, and simplification are incorrect.

fillWeight is listed as strokeWidth, but the default is -1 hachureGap is listed as strokeWidth, but the default is -1 simplification is listed as 1, but the default is 0

Hi, I modify the demo with D3 version 4 success. https://died.github.io/us-map.html

But when I change topojson to other country, it give out a error

Uncaught (in promise) DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0. at t.path (https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.min.js:1:24757)

I think it should be topojson content issue but it's my first time using topojson, so I have no idea to fix it, any tips ? Thank.

topojson source https://github.com/jason2506/Taiwan.TopoJSON/blob/master/topojson/counties.json

code different with Taiwan topojson, other same as us-map.html

      d3.json("counties.json", async (error, tw) => {
        if (error) throw error;
        let topo = topojson.feature(tw, tw.objects.map).features;
        for (let feature of topo) {
          await rc.path(path(feature), {
            fill: randomColor(),
            fillStyle: randomStyle(),
            hachureAngle: randomAngle()
          });
        }
      });

Hello, I want to use dots fillStyle but I have an issue with it. Everytime I use it, it changes dots positions even if the seed is fixed.

In my app, I have a loop to draw and dots are moving on each draw call which is quite disturbing. Note that I have tested with others fillStyle and it works for others filling. Here is my conf if it can helps :

{
    fillStyle: "dots",
    fill: "rgb(119, 217, 93)",
    seed: 1,
    stroke: "black",
    roughness: 3,
    strokeWidth: 5
}

Hi! We're using rough.js for our application. We're facing issues with rendering path-based shapes due to the fill rule update. Would be very helpful to pass a certain fill rule via options.

In our case, there's no way to set non-zero to a cylinder path and filling is inconsistent

Bumps terser from 5.7.0 to 5.14.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I'm trying to add a Sketchy Rough collection to Pencil. This is a box example:

You can see Pencil is able to drag only over SVG paths. Do you think there is a way we could overcome this issue?

Hello,

I'm working on a project for science communication about Antarctica. I found rough.js really perfect for the different drawings (https://observablehq.com/@jbaba/antarctica-elevation). These drawings will be part of a scrollytelling where animations are importants to support the story. I plan to use gsap for that purpose. Unfortunately , I discovered that rough.js and gsap are not compatible. Is there an other way to deal with animation and rough.js ? Could compatibility be on the whish list?