2

As you can see in my image below my canvas pathing is kind of pixelated or like not smooth. I would like to know if there is a way to smooth them out?

enter image description here

Effective Code Block:

if (this.shade.color.topTrim) {
  var toptrim = new Image();
  toptrim.onload = function() {
    for (i = 0; i < c.length; i++) {
      var canvas = c[i];
      var ctx = canvas.getContext("2d");
      var pattern = ctx.createPattern(toptrim, "repeat");
      ctx.beginPath();
        ctx.moveTo( ( 150 - ( ProductDesigner.shade.model.radius / 2 ) ) , 80 );
        ctx.quadraticCurveTo( 150 , 70, 150 + ( ProductDesigner.shade.model.radius / 2 ), 80);
        ctx.lineTo( 150 + ( ProductDesigner.shade.model.radius / 2 ), 83 );
        ctx.quadraticCurveTo( 150 , 73, 150 - ( ProductDesigner.shade.model.radius / 2 ), 83);
        ctx.fillStyle = pattern;
        ctx.fill();
      ctx.closePath();
    }
  }
  toptrim.src = "/wp-content/plugins/productdesigner/assets/Trimmings/" + this.shade.color.topTrim + ".jpg";
} else {
  for (i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
      ctx.moveTo( ( 150 - ( ProductDesigner.shade.model.radius / 2 ) ) , 80 );
      ctx.quadraticCurveTo( 150 , 70, 150 + ( ProductDesigner.shade.model.radius / 2 ), 80);
      ctx.lineTo( 150 + ( ProductDesigner.shade.model.radius / 2 ), 83 );
      ctx.quadraticCurveTo( 150 , 73, 150 - ( ProductDesigner.shade.model.radius / 2 ), 83);
    ctx.closePath();
    ctx.stroke();
  }
}
  • You may be zoomed in on the canvas. Ensure that the `canvas.width` and `canvas.height` are the same as `canvas.style.width` and `canvas.style.height` Note that you can not do a direct compare as the style dimensions require a post fix eg "100px" Canvas width and height set the number of pixels. canvas.style width and height set the size on the page. If you set `canvas.width = 100` and `canvas.style.width = "200px"` then each canvas pixel is 2 pixels wide on the page and thus you will notice the effects of aliasing inherent in the rendering of bitmapped images. – Blindman67 Jun 05 '16 at 04:29
  • You will always have antialias, but here it seems like you are scaling your canvas with CSS. Don't. Set the canvas width and and height attributes instead. If you don't want to make all coordinates recalculations, you can use the context's scale method. Also, you may want to down-scale your canvas with CSS (set its width and height attributes higher and it's styles smaller). But you may have some other unwanted results then. – Kaiido Jun 05 '16 at 04:34
  • @Kaiido I have set Te width and height fixed on the style element. Do you mean size it completely using JavaScript? I thought fixed CSS was okay. –  Jun 05 '16 at 04:35
  • If they don't match, no. e.g, if your ratio attr/CSS is a float, you'll be on sub-pixels-> artifacts. And if you are upscaling with CSS, you'll also have these artifacts except if the not widely supported CSS image-rendering attribute is set to crisp-edges or pixelated. – Kaiido Jun 05 '16 at 04:40
  • Oh and I misread your last comment. when I speak about width and height attributes, I'm not talking about the style attribute. The later is just the display size on the page. The former sets the actual number of pixels of your canvas image. – Kaiido Jun 05 '16 at 05:08
  • @Kaiido sorry I do not fully understand are you able to make a simple example quadraticCurve with comments? Thanks –  Jun 05 '16 at 05:31
  • [read this](http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties), and [here is a fiddle](https://jsfiddle.net/umv7c9r1/) for you. – Kaiido Jun 05 '16 at 05:56
  • Hmm I didn't see heaps of improvement but not sure if I implemented correctly I know if I give it higher scale the proportion is off. –  Jun 06 '16 at 10:28

0 Answers0