×

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

×

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

Result Size: 625 x 565
​x
 
<!DOCTYPE html>
<html>
<body>
​
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
​
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
​
//Draw a red line at y=100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
​
ctx.font = "20px Arial"
​
//Place each word at y=100 with different textBaseline values
ctx.textBaseline = "top"; 
ctx.fillText("Top", 5, 100); 
ctx.textBaseline = "bottom"; 
ctx.fillText("Bottom", 50, 100); 
ctx.textBaseline = "middle"; 
ctx.fillText("Middle", 120, 100); 
ctx.textBaseline = "alphabetic"; 
ctx.fillText("Alphabetic", 190, 100); 
ctx.textBaseline = "hanging"; 
ctx.fillText("Hanging", 290, 100); 
</script>
​
</body>
​
</html>
​
×

Report a Problem:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

help@w3schools.com