canvas {

border: 1px solid blue;

}

img {

width: 40px;

height: auto;

}

<canvas id="canvas" layoutsubtree="true" width=500 height=500>

<div id=drawElement style="width: 300px; height: 300px;" id="d">

Hello world!<br>I'm multi-line, <b>formatted</b>,

rotated text with emoji (&#128512;), RTL text

<span dir=rtl>من فارسی صحبت میکنم</span>,

vertical text,

<p style="writing-mode: vertical-rl;">

这是垂直文本

</p>

and an inline image:

<img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Gustav_chocolate.jpg">

</div>

onload = () => {

const ctx = document.getElementById("canvas").getContext("2d");

const el = document.getElementById("drawElement");

ctx.rotate((45 * Math.PI) / 180);

ctx.translate(200, -125);

ctx.drawElement(el, 30, 0);

}