// ChromeかFirefoxで処理を変える function getBgCanvas(id, width, height){ var ctx = false; if(document.getCSSCanvasContext){ // webkit用の指定 ctx = document.getCSSCanvasContext('2d', id, width, height); }else if(document.mozSetImageElement){ // Firefox用の指定 var canvas = document.createElement('canvas'); canvas.setAttribute("width", width); canvas.setAttribute("height", height); ctx = canvas.getContext('2d'); document.mozSetImageElement(id, canvas); } return ctx; } var ctx = getBgCanvas('background', 100, 400); // ピンクの丸 ctx.beginPath(); ctx.strokeStyle = '#F8C1C6'; ctx.fillStyle = '#F8C1C6'; ctx.arc(50,50,50,0,Math.PI*2,true); ctx.fill(); ctx.stroke(); // 白の丸 ctx.beginPath(); ctx.strokeStyle = '#E3D8C4'; ctx.fillStyle = '#E3D8C4'; ctx.arc(50,150,50,0,Math.PI*2,true); ctx.fill(); ctx.stroke(); // 緑の丸 ctx.beginPath(); ctx.strokeStyle = '#849865'; ctx.fillStyle = '#849865'; ctx.arc(50,250,50,0,Math.PI*2,true); ctx.fill(); ctx.stroke(); //茶色い長方形 ctx.fillStyle = '#D8CFAF'; ctx.fillRect(45,300,10,100);
<div id="bg-canvas"></div>
#bg-canvas{ background-image: -moz-element(#background); background: -webkit-canvas(background); height:400px; }