canvas short sample

2021-03-24 23:44:31 +01:00 · 2021-03-24 23:44:31 +01:00 · fc78e98a46
parent 094c855568
commit fc78e98a46
1 changed files with 31 additions and 0 deletions
--- a/samples/react-image-editor/src/components/ImageManipulation/canvas.html
+++ b/samples/react-image-editor/src/components/ImageManipulation/canvas.html
@ -0,0 +1,31 @@
+<html>
+  <body>
+
+<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
+<script>
+
+  const img= new Image()
+  img.crossOrigin = "Anonymous";
+  img.addEventListener("load", imageReceived, false);
+  img.src = 'https://pnp.github.io/images/hero-parker-p-800.png';
+
+
+  function imageReceived() {
+  const c = document.getElementById("myCanvas");
+  const ctx = c.getContext("2d");
+  c.width = img.width;
+  c.height = img.height;
+
+  ctx.translate(0, c.height);
+  ctx.scale(1, -1);
+
+  ctx.drawImage(img, 0, 0);
+  ctx.font = "30px Arial";
+  ctx.strokeText("Hello PnP-Community",10,50);
+}
+
+</script>
+
+
+</body>
+</html>