create canvas and draw small line javascript in debug console

canvas_01.js

// create canvas and draw small line 
//  tested in  google chrome Develope 
//  about:blank 

var canvas = document.createElement("canvas");

canvas.id = "mycanvas";

canvas.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
canvas.textContent = 'Drawing canvas is not supported'

 
document.body.appendChild(canvas);



var cv = canvas  

 
var setCanvasSize = function() {
   cv.width = window.innerWidth;
   cv.height = window.innerHeight;
}

setCanvasSize () 
 

var ct =  cv.getContext("2d")

for(var y=1 ;y < 10 ; y++){ 
	line_h(10,45+y*10,200)
}
for(var x=1 ;x < 10 ; x++){ 
	line_h(10,45+y*10,200)
}


function line_h(x1,y1,x2){
	ct.beginPath(); 
	ct.moveTo(x1,y1);
	ct.lineTo(x2,y1 );
	ct.stroke();
}
function line_v(x1,y1,y2){
	ct.beginPath(); 
	ct.moveTo(x1,y1);
	ct.lineTo(x1,y2 );
	ct.stroke();
}

function fillrect(x1,y1,wi,hi,fillstyle){
	ct.fillStyle=fillstyle;
	ct.fillRect(x1, y1, wi, hi)
	ct.lineWidth = "2";
	ct.strokeStyle = "black";
	ct.strokeRect(x1,y1,wi,hi)
}

for(var x =1 ;x <10 ; x++ ){
   
	fillrect(x*10,x*10,100,50,"yellow");

}