honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

canvas short sample

This commit is contained in:
Peter Paul Kirschner 2021-03-24 23:44:31 +01:00
parent 094c855568
commit fc78e98a46
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
samples/react-image-editor/src/components/ImageManipulation/canvas.html Normal file
View File

@ -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>