Multimedia: canvas
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 50, 20, 0, 2 * Math.PI); ctx.stroke(); </script>
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); ctx.font = "24px Arial"; ctx.fillText("ABCD", 120, 25); </script>
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); ctx.font = "24px Arial"; ctx.strokeText("ABCD", 5, 90); </script>
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(0, 0, 200, 100); </script>
<canvas id="tinfCanvas" width="200" height="100" style='border: 1px solid black;'></canvas> <script> var c = document.getElementById("tinfCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createRadialGradient(100, 50, 20, 100, 50, 40); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(0, 0, 200, 100) </script>
<p><canvas id="tinfCanvas6" style="border: 1px solid black;" width="200" height="100"></canvas> <script> var c = document.getElementById("tinfCanvas6"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); ctx.beginPath(); ctx.arc(100, 50, 20, 0, 2 * Math.PI); ctx.stroke(); ctx.font = "24px Arial"; ctx.fillText("ABCD", 120, 25); ctx.font = "24px Arial"; ctx.strokeText("ABCD", 5, 90); </script></p>