Skip to content

Instantly share code, notes, and snippets.

@scottlow

scottlow/canvas-formatted-text.html

Created May 13, 2021 18:25
Show Gist options
  • Save scottlow/bb29dc356a2172c9e81982871185173f to your computer and use it in GitHub Desktop.
Save scottlow/bb29dc356a2172c9e81982871185173f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas-formatted-text.html
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="320" height="200" style="border: 1px solid gray"></canvas>
</body>
<script>
// Get Canvas and 2D Context
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.font = "20px Arial";
// Create CanvasFormattedText data model
var text = new CanvasFormattedText();
var hello = new CanvasFormattedTextRun('Hello ');
var world = new CanvasFormattedTextRun('world!');
text.appendRun(hello);
text.appendRun(world);
// Render
context.fillFormattedText(text, 10, 10, 25);
</script>
</html>
@scottlow
Copy link
Author

Please run this in the latest version of Microsoft Edge Canary with the "Experimental Web Platform Features" flag enabled in edge://flags

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment