Feature request: Textures to fill properties?

[cogerk]

Hey All,

I found this message in the google group asking if adding hatching to graphs like quad/circle, etc. was possible. Looks like there is probably an unexposed way to do this in a workaround, but just curious if anything higher level is in the works? Apologies if this is a duplicate request, couldn't find anything with a search. Thanks!

[bryevdv]

I thought there was an issue for this but I can't find one either.

Relevant reference: https://www.w3schools.com/tags/canvas_createpattern.asp

I don't think the direct technical aspects of having fill patterns is especially difficult. The main issue is what to do about the API. Bokeh currently uses fill_color everywhere. So we either have to:

• expand the meaning of fill "color" to include patterns too, or
• add some new property but somehow prevent (or at least warn about) incompatible usage with fill_color

Thoughts, @bokeh/dev ?

[bryevdv]

For the second option, we could add a fill_style (Bokeh) property that accepts both colors or instances of a new Pattern model. The fill_color could become a (python) property that just checks that the value is a color, and then sets fill_style. I would say it shouldn't be deprecated because it is far too common, it can just be an alias for setting colors, specifically.

I'm not sure just letting fill_color accept Pattern would be so bad, though.

[jbednar]

Both options sound reasonable; no particular preference. Definitely would be nice to have!

[bryevdv]

Canvas patterns can either be an image or another canvas. Could support both, an ImagePattern that takes a URL to an image, and CustomJSPattern that takes JS commands for drawing on a ctx. Useful example for the latter:

http://jsfiddle.net/UxDVR/7/

[bryevdv]

in case the fiddle disappers

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');

pctx.beginPath();
pctx.moveTo(0.0, 40.0);
pctx.lineTo(26.9, 36.0);
pctx.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
pctx.lineTo(40.0, 0.0);
pctx.lineTo(11.8, 3.0);
pctx.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
pctx.lineTo(0.0, 40.0);
pctx.closePath();
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fill();
pctx.lineWidth = 0.8;
pctx.strokeStyle = "rgb(0, 156, 86)";
pctx.lineJoin = "miter";
pctx.miterLimit = 4.0;
pctx.stroke();

var pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0,0,200,200);
ctx.fillStyle = pattern;
ctx.fill();