SyntaxFix

[google-chrome] css transform, jagged edges in chrome

For canvas in Chrome (Version 52)

All listed answers is about images. But my issue is about canvas in chrome (v.52) with transform rotate. They became jagged and all this methods can't help.

Solution that works for me:

  1. Make canvas larger on 1 px for each side => +2 px for width and height;
  2. Draw image with offset + 1px (in position 1,1 instead of 0,0) and fixed size (size of image should be 2px less than size of canvas)
  3. Apply required rotation

So important code blocks:

_x000D_
_x000D_ 
// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);
_x000D_ 
/* This style should be applied for fixed version */
canvas {
  margin-left: -1px;
  margin-top:-1px;
}
_x000D_ 
<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>
_x000D_
_x000D_
_x000D_

Sample: https://jsfiddle.net/tLbxgusx/1/

Note: there is a lot of nested divs because it is simplified version from my project.

This issue is reproduced also for Firefox for me. There is no such issue on Safari and FF with retina.

And other founded solution is to place canvas into div of same size and apply following css to this div:

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

And rotation should be applied to this wrapping div. So listed solution is worked but with small modification.

And modified example for such solution is: https://jsfiddle.net/tLbxgusx/2/

Note: See style of div with class 'third'.

Examples related to google-chrome

• SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81 • SameSite warning Chrome 77 • What's the net::ERR_HTTP2_PROTOCOL_ERROR about? • session not created: This version of ChromeDriver only supports Chrome version 74 error with ChromeDriver Chrome using Selenium • Jupyter Notebook not saving: '_xsrf' argument missing from post • How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? • Selenium: WebDriverException:Chrome failed to start: crashed as google-chrome is no longer running so ChromeDriver is assuming that Chrome has crashed • WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser • How to make audio autoplay on chrome • How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to transform

• Change value in a cell based on value in another cell • Rotate and translate • jQuery click events not working in iOS • Blurry text after using CSS transform: scale(); in Chrome • How to play CSS3 transitions in a loop? • jQuery rotate/transform • css transform, jagged edges in chrome • Animate element transform rotate • Generate Json schema from XML schema (XSD) • CSS3 Continuous Rotate Animation (Just like a loading sundial)

Examples related to antialiasing

• How to apply font anti-alias effects in CSS? • Webfont Smoothing and Antialiasing in Firefox and Opera • css transform, jagged edges in chrome • HTML5 Canvas and Anti-aliasing