{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Programming Tech Brief By HackerNoon","title":"How to Use the HTML <canvas> Element to Draw Shapes, Text, and Animations","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/43c5258e\"></iframe>","width":"100%","height":180,"duration":251,"description":"\n        This story was originally published on HackerNoon at: https://hackernoon.com/how-to-use-the-html-lesscanvasgreater-element-to-draw-shapes-text-and-animations.\nLearn what makes the HTML  tag unique, how it handles pixels instead of DOM elements, and how to draw and create interactive graphics directly in the br\nCheck more stories related to programming at: https://hackernoon.com/c/programming.\n            You can also check exclusive content about #html5, #html-canvas, #javascript-canvas-tutorial, #html5-canvas-examples, #canvas-paint-app, #webgl-vs-canvas, #canvas-resize-javascript, #drawing-with-code,  and more.\nThis story was written by: @roy-shell5. Learn more about this writer by checking @roy-shell5's about page,\n            and for more stories, please visit hackernoon.com.\nThe  tag is a powerful yet misunderstood part of HTML.\nIt’s not a container — it’s a pixel-based drawing surface that lets you render shapes, images, animations, and even games directly in the browser.\n\nIn this article:\n\nYou’ll learn what makes  special and why it can’t have child elements\n\nUnderstand how it operates purely in pixels (not DOM nodes)\n\nDiscover how to make it responsive using resize listeners\n\nAnd finally, draw your first interactive line with just a few lines of JavaScript\n\nWhether you’re building a data visualization, a drawing app, or just exploring creative coding -  is your blank digital playground.","thumbnail_url":"https://img.transistorcdn.com/KhCapPSRkLGL2Xw8888yuChkNRWthaKapLYTvNdu4W4/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzQxMTY2LzE2ODM1/ODIzMzAtYXJ0d29y/ay5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}