在HTML5画布上填充非矩形

Question

I have a cube made from lines and rectangles on a canvas and I want to fill in areas that aren't rectangles.

Here is my code and jsFiddle .

 var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') var height = 250 var width = 250 var edge = { x: 8, y: 8 } canvas.height = height canvas.width = width ctx.beginPath() ctx.rect(50, 50, 100, 100) ctx.rect(100, 100, 100, 100) ctx.strokeStyle = 'black' ctx.stroke() ctx.beginPath() ctx.moveTo(50, 150) ctx.lineTo(100, 200) ctx.moveTo(50, 50) ctx.lineTo(100, 100) ctx.moveTo(150, 50) ctx.lineTo(200, 100) ctx.moveTo(150, 150) ctx.lineTo(200, 200) ctx.strokeStyle = 'gray' ctx.lineWidth = 2 ctx.stroke() 

 canvas { background: white; /*border-style:solid;*/ } 

 <canvas></canvas> 

How would I fill in these areas?

Answer 1

Try to closepath for each side and then call fill:

 var canvas = document.querySelector('canvas') var ctx = canvas.getContext('2d') var height = 250 var width = 250 var edge = { x: 8, y: 8 } canvas.height = height canvas.width = width ctx.beginPath() ctx.rect(50, 50, 100, 100) ctx.rect(100, 100, 100, 100) ctx.strokeStyle = 'black' ctx.stroke() ctx.beginPath() ctx.moveTo(50, 150) ctx.lineTo(100, 200) ctx.lineTo(100, 100) ctx.lineTo(50, 50) ctx.lineTo(50, 150) //the path is closed now, the fill would color the area ctx.strokeStyle = 'blue' ctx.lineWidth = 2 ctx.stroke() ctx.fillStyle="red"; ctx.fill(); ctx.moveTo(50, 50) ctx.lineTo(100, 100) ctx.moveTo(150, 50) ctx.lineTo(200, 100) ctx.moveTo(150, 150) ctx.lineTo(200, 200) ctx.strokeStyle = 'blue' ctx.lineWidth = 2 ctx.stroke() 

 canvas { background: white; /*border-style:solid;*/ } 

 <canvas></canvas>