Canvas - zmiana kolorów

pytanie zadane 28 listopada 2016 w JavaScript przez patryk1852 Nowicjusz (140 p.)

Cześć, mam problem z zmianą kolorów za pomocą przycisku w elemencie canvas na randomowe kolory. Kod js:

function rysunek() {
	var rysunek = document.getElementById('plo');
	canvas = rysunek.getContext("2d");

	var a = parseInt(Math.random() * 256);
	var b = parseInt(Math.random() * 256);
	var c = parseInt(Math.random() * 256);


canvas.beginPath();//1
canvas.moveTo(118,77);
canvas.lineTo(118,99);
canvas.lineTo(140,99);
canvas.lineTo(118,77);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();

canvas.beginPath();//2
canvas.moveTo(128,81);
canvas.lineTo(166,81);
canvas.lineTo(180,99);
canvas.lineTo(145,99);
canvas.lineTo(128,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();

canvas.beginPath();//3
canvas.moveTo(171,81);
canvas.lineTo(191,81);
canvas.lineTo(191,107);
canvas.lineTo(171,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();

canvas.beginPath();//4
canvas.moveTo(196,81);
canvas.lineTo(219,81);
canvas.lineTo(219,107);
canvas.lineTo(196,107);
canvas.lineTo(196,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();

canvas.beginPath();//5
canvas.moveTo(223,81);
canvas.lineTo(272,81);
canvas.lineTo(272,130);
canvas.lineTo(223,81);
canvas.fillStyle="rgb("+a+","+b+","+c+")";
canvas.fill();
canvas.stroke();

canvas.beginPath();//6
canvas.moveTo(223,86);
canvas.lineTo(223,116);
canvas.lineTo(254,116);
canvas.lineTo(223,86);
canvas.fillStyle="rgb(50,50,50)";
canvas.fill();
canvas.stroke();

canvas.beginPath();//7
canvas.moveTo(276,102);
canvas.lineTo(276,152);
canvas.lineTo(325,152);
canvas.lineTo(276,102);
canvas.fillStyle="rgb(50,50,50)";
canvas.fill();
canvas.stroke();

} 

function main() {
	
document.getElementById('clear').addEventListener('click', function() {
	canvas.clearRect(0, 0, rysunek.width, rysunek.height);
}, false);

rysunek();
}

Kod HTML:

<!Doctype HTML>
<html>
<head>
	<title>Lesson 4</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="js.js"></script>
</head>
<body onload="rysunek()">
<div id="fis">
	<canvas style="margin-right: 10px;" width="400" height="250" id="plo" >Przeglądarka nie obsługuje elementu</canvas></div>
	<input type="submit" id="clear">
</body>
</html>