andyhill Posted December 16, 2020 Share Posted December 16, 2020 Hi, I am trying to use some code from the Internet and no matter what I do I have getContex errors, please advise (drawCanvas() rectangles were for visually tracking only) - thanks. MainHTMLFrame.HTML.BeginUpdate; MainHTMLFrame.HTML.Clear; s:= '<!DOCTYPE HTML> '+#13#10+ '<html lang = "en"> '+#13#10+ ' <head> '+#13#10+ ' <script> '+#13#10+ ' function drawCanvas() '+#13#10+ ' { '+#13#10+ ' var canvas = document.getElementById("bodyCanvas"); '+#13#10+ ' if (canvas.getContext) '+#13#10+ ' { '+#13#10+ ' var ctx = canvas.getContext("2d"); '+#13#10+ ' ctx.fillStyle = "rgba(125, 46, 138, 0.5)"; '+#13#10+ ' ctx.fillRect(25,25,100,100); '+#13#10+ ' ctx.fillStyle = "rgba( 0, 146, 38, 0.5)"; '+#13#10+ ' ctx.fillRect(58, 74, 125, 100); '+#13#10+ ' } '+#13#10+ ' } '+#13#10+ ' function downloadImage() '+#13#10+ ' { '+#13#10+ ' var canvas = document.getElementById("bodyCanvas"); '+#13#10+ ' if (canvas.getContext) '+#13#10+ ' { '+#13#10+ ' var image = canvas.toDataURL(); '+#13#10+ ' var aLink = document.createElement(''a''); '+#13#10+ ' var evt = document.createEvent("HTMLEvents"); '+#13#10+ ' evt.initEvent("click"); '+#13#10+ ' aLink.download = ''image.png''; '+#13#10+ ' aLink.href = image; '+#13#10+ ' aLink.dispatchEvent(evt); '+#13#10+ ' } '+#13#10+ ' } '+#13#10+ ' </script> '+#13#10+ ' </head> '+#13#10+ ' <body id:="bodyCanvas"> '+#13#10+ ' <h3 style="margin-left:10px;" "margin-right:40px;"> '+#13#10+ ' Sample text '+#13#10+ ' </h3> '+#13#10+ ' <button onclick="javascript:downloadImage()">Download Canvas</button> '+#13#10+ ' </body> '+#13#10+ '</html>'; MainHTMLFrame.HTML.Add(s); MainHTMLFrame.HTML.EndUpdate; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 16, 2020 Share Posted December 16, 2020 1 hour ago, andyhill said: I am trying to use some code from the Internet and no matter what I do I have getContex errors, please advise (drawCanvas() rectangles were for visually tracking only) - thanks. Hello, Missing <canvas> tag? Quote Link to comment Share on other sites More sharing options...
andyhill Posted December 16, 2020 Author Share Posted December 16, 2020 I tried a canvas tag but my rendered html always appeared below the canvas rectangle. How do we get the BODY RENDERED CANVAS ? Quote Link to comment Share on other sites More sharing options...
andyhill Posted December 16, 2020 Author Share Posted December 16, 2020 ' <body> '+#13#10+ ' <canvas id="bodyCanvas" width="640" height="480" style="border:1px solid #000000;"> '+#13#10+ ' <h3 style="margin-left:10px;" "margin-right:40px;"> '+#13#10+ ' Sample text '+#13#10+ ' </h3> '+#13#10+ ' </canvas> '+#13#10+ ' <button onclick="javascript:downloadImage()">Download Canvas</button> '+#13#10+ ' </body> '+#13#10+ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.