1

For some reason the blotter.js canvas size is not cangable. Blotter seems to generate a canvas named b-canvas by default? But I can't find where it gets it width and height from? And I am not able to set a new width and size by .style in js. Help?!

I've tried all the techniques I could find. I've also tried to set a Overflow: visible to the parent (Text) in js and in the css file, but the render is still crashing with the bounds of the canvas. What am I doing wrong?


var text = new Blotter.Text("Hello", {
        weight: 800,
        size: 80,
        fill: 'lightgray',
        paddingLeft: 80,
        paddingRight: 80,
        paddingBottom: 80,
        paddingTop: 80
    });
    /*
     * https://blotter.js.org
     */
    var blotter = new Blotter(material, {
        texts: text
    });
    var canvas = blotter.forText(text).domElement;
    canvas.style.visibility = 'visible!important';
    canvas.style = "width: 100vh !important";
    canvas.style = "height: 100vw !important";
    canvas.style = "z-index: -3 !important";
    container.appendChild(canvas);
L MXIII
  • 21
  • 2

1 Answers1

1

You can simply wrap it inside a div and resize that. The canvas size is probably calculated based on the font-size and it is as big as the drawing itself.

<div id="wrap">
    <canvas></canvas>
</div>

<style>
    #wrap canvas {
        width: 50px !important
    } 
</style>

Take a look at the "Blotter.js" website itself and inspect its logo, see that it has this same code and how you can resize it.

Sergi
  • 1,192
  • 3
  • 19
  • 37
  • In my case the canvas is appended to a parent div I've made for the text. It does not seem to affect the canvas size if I change the CSS on that div for some reason? – L MXIII Sep 20 '19 at 13:13
  • Are you using "!important"? If you copy these structure it should, otherwise the problem is somewhere else. I'd go to the Blotter.js page like I said and take a look at their graphics, you can easily resize them by resizing it's containers, copy a similar HTMl structure. – Sergi Sep 20 '19 at 13:27
  • @LMXIII do u either of you know how to scale the canvas proportionately so it doesnt stretch the text? – oldboy Sep 22 '20 at 06:44