https://github.com/mlewand/canvas-text-rendering-comparison

A research comparing canvas output across different platforms.
https://github.com/mlewand/canvas-text-rendering-comparison

Last synced: about 2 months ago
JSON representation

A research comparing canvas output across different platforms.

• Host: GitHub
• URL: https://github.com/mlewand/canvas-text-rendering-comparison
• Owner: mlewand
• Created: 2023-10-23T21:32:13.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-28T12:08:42.000Z (about 1 year ago)
• Last Synced: 2024-10-14T12:55:18.269Z (3 months ago)
• Language: JavaScript
• Size: 296 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# canvas-text-rendering-comparison

A research comparing canvas output across different platforms.

## Web platform

```sh

git clone https://github.com/mlewand/canvas-text-rendering-comparison.git

cd canvas-text-rendering-comparison/html

yarn install

yarn start

```

This will open your web browser to a canvas playground page.

## Image comparing

You can use [Image Magick's CLI compare function](https://imagemagick.org/script/compare.php).

```cli

magick compare lorem-ipsum-short-chrome.png lorem-ipsum-short-safari.png lorem-ipsum-short__diff-chrome-safari.png

magick compare lorem-ipsum-short-chrome.png lorem-ipsum-short-firefox.png lorem-ipsum-short__diff-chrome-ff.png

```

I recommend also using ImageDiff app from AppStore to compare two images side by side (I find "wiper" compare mode to be the best).