{"id":28880,"date":"2024-05-01T05:30:42","date_gmt":"2024-05-01T04:30:42","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-graficos-dinamicos-con-canvas-api\/"},"modified":"2024-06-03T17:43:04","modified_gmt":"2024-06-03T16:43:04","slug":"domina-graficos-dinamicos-con-canvas-api","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/","title":{"rendered":"Master Dynamic Graphics with Canvas API"},"content":{"rendered":"<p>Creating dynamic graphics is an essential skill for any web developer looking to improve the interactivity and visual quality of their applications. The HTML5 Canvas API provides a powerful and flexible canvas for drawing graphics, from simple diagrams to complex interactive animations. In this article, I&#039;ll walk you through the basics of the Canvas API, show how to draw basic graphics, and move you toward creating dynamic animations.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#%C2%BFQue_es_Canvas_API\" >What is Canvas API?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Primeros_Pasos_con_Canvas\" >Getting Started with Canvas<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Configuracion_del_Canvas\" >Canvas Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Dibujando_Formas_Basicas\" >Drawing Basic Shapes<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Rectangulos\" >Rectangles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Lineas\" >Lines<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Animacion_Simple_con_Canvas\" >Simple Animation with Canvas<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Movimiento\" >Motion<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Interactividad\" >Interactivity<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Eventos_del_Raton\" >Mouse Events<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-dynamic-graphics-with-canvas-api\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Canvas_API\"><\/span>What is Canvas API?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Canvas API is a part of HTML5 that provides a space where scripts can be used to draw graphics and animations directly on a web page. It allows rendering 2D graphics and, with the help of additional libraries, even 3D. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Primeros_Pasos_con_Canvas\"><\/span>Getting Started with Canvas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into complex graphics and animations, it&#039;s crucial to understand how to set up a canvas and draw basic elements. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configuracion_del_Canvas\"><\/span>Canvas Configuration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To start, you need an item <code>&lt;canvas&gt;<\/code> in your HTML:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;canvas id=&quot;miCanvas&quot; width=&quot;480&quot; height=&quot;320&quot;&gt;&lt;\/canvas&gt;<\/code><\/pre>\n<p>In your JavaScript file, you must obtain the canvas context, which is the object that directly allows drawing on the canvas:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const canvas = document.getElementById(&#039;myCanvas&#039;); const ctx = canvas.getContext(&#039;2d&#039;);<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Dibujando_Formas_Basicas\"><\/span>Drawing Basic Shapes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Drawing basic shapes is the first step in understanding how to interact with the Canvas API.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Rectangulos\"><\/span>Rectangles<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To draw a rectangle, we use the method <code>fillRect<\/code>, where the parameters are the coordinates of the top left point, and the dimensions of the rectangle:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">ctx.fillStyle = &#039;#FF6F61&#039;; \/\/ Set the fill color ctx.fillRect(50, 50, 150, 100);<\/code><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Lineas\"><\/span>Lines<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Drawing lines involves moving the &quot;brush&quot; to a starting point and then drawing a line to an ending point:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">ctx.beginPath(); \/\/ Start a new stroke ctx.moveTo(50, 50); \/\/ Move the brush to the point (50, 50) ctx.lineTo(200, 200); \/\/ Draw a line to point (200, 200) ctx.stroke(); \/\/ Make the trace<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Animacion_Simple_con_Canvas\"><\/span>Simple Animation with Canvas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that you know how to draw static elements, let&#039;s bring them to life with some basic animations.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Movimiento\"><\/span>Motion<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Let&#039;s say you want to move a rectangle across the canvas. This can be achieved by redrawing the rectangle at different positions at regular time intervals:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let x = 0; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ clear the canvas ctx.fillRect(x, 50, 50, 50); \/\/ draw the rectangle at the new position x += 2; \/\/ change the position for the next frame if(x &lt; canvas.width) { requestAnimationFrame(animate); \/\/ continue animation } } animate();<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Interactividad\"><\/span>Interactivity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Making your graphics responsive to user interaction can make your Canvas projects much more interesting and useful.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Eventos_del_Raton\"><\/span>Mouse Events<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Here I show you how you can make a circle change color when the user hovers over it:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const circle = { x: 100, y: 100, radius: 30, color: &#039;#FF6F61&#039; }; canvas.addEventListener(&#039;mousemove&#039;, function(event) { const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; const distance = Math. sqrt((mouseX - circle.x) ** 2 + (mouseY - circle.y) ** 2); if(distance &lt; circle.radius) { circle.color = &#039;#34568B&#039; mouse is over the circle } else { circle.color = &#039;#FF6F61&#039;; \/\/ Reset the original color } drawCircle(); function drawCircle() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); ctx.fillStyle = circle.color; ctx.fill(); } drawCircle();<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The basics of Canvas are just the beginning. Here we&#039;ve covered how to set up a canvas, draw on it, and animate it with basic interactions. This powerful tool allows you to create everything from games to data visualizations and interactive effects on the web. If you want to delve deeper into the potential of Canvas or have any questions, do not hesitate to visit us at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a> and if you need direct assistance, you can contact us through <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">our contact form<\/a>.<\/p>\n<p>I encourage you to experiment with what you&#039;ve learned and see how far you can take your web projects with the help of the Canvas API. Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating dynamic charts is an essential skill for any web developer looking to improve the interactivity and visual quality of their applications. The HTML5 Canvas API provides a powerful and flexible canvas for drawing charts, from simple diagrams to complex interactive animations. In this article, I\u2019ll walk you through the basics of creating dynamic charts.<\/p>","protected":false},"author":1,"featured_media":28881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[667,205,1404,90,491,1473,2205,1365,1008],"class_list":["post-28880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-api","tag-blog","tag-canvas","tag-con","tag-dinamicos","tag-domina","tag-frontend","tag-graficos","tag-pruebas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28880"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28880\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28881"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}