Show current date and time in <canvas> using JS

Question

I have to make a few shapes using the <canvas> tag in HTML 5 and then add a current date and time text using the same tag. All this has to be done using javascript. I can display time and date normally in JS but have no idea how to add it to my canvas.

function doFirst()
{
var x = document.getElementById('canvas');
canvas = x.getContext('2d');

canvas.arc(200,200,150,0,2*Math.PI);
canvas.stroke();

today = new Date(); 
document.write("<br />The time now is: ",today.getHours(),":",today.getMinutes()); 
document.write("<br />The date is: ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear());
 }

window.addEventListener("load", doFirst, false);

So thats what i currently have, my drawing wont show if i use that new date function. Any help would be appreciated.

Answer 1

document.write writes to the document... which is closed by the time window.onload fires and therefore your entire page is nuked.

Try canvas.fillText() instead, for drawing text to the canvas.

As an aside, the variable name canvas is misleading. Typically ctx is used to refer to the context.