CODEWITHSUNDEEP
javascripthtmlcss
Tony White
Tony White

Reputation: 197

Create a button out of a javascript canvas object

function draw() {
  var canvas = document.getElementById('navigation');
  if(canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    //shape 1
    ctx.moveTo(300, 1120);
    ctx.lineTo(230, 1070);
    ctx.lineTo(160, 880);
    ctx.lineTo(170, 770);
    ctx.lineTo(260, 640);
    ctx.lineTo(350, 710);
    ctx.lineTo(360, 820);
    //shape 2
    ctx.moveTo(340, 1050);
    ctx.lineTo(390, 820);
    ctx.lineTo(450, 710);
    ctx.lineTo(450, 810);
    ctx.fill();
  }
}
<html>
  <head>
  </head>
  <body onload="draw();">
    <canvas id="navigation" width="1500" height="1500"></canvas>
  </body>
</html>

I've got this snippet of code, and I was wondering if it's possible to make Shape 1 and Shape 2 independently clickable buttons, each redirecting to a different webpage.

Upvotes: 0

Views: 111

Answers (1)

Maximilian K&#246;hler
Maximilian K&#246;hler

Reputation: 420

Here is another way of achieving it... instead of using canvas here the svg object gets used... though using an experimental feature (clip-path, css property)

<style type="text/css">
body { margin: 0; }
</style>
<style type="text/css">
svg {
	display: block;
	height: 0;
}
</style>
<svg>
	<defs>
		<clipPath id="c1">
			<path
				d="
				M 300, 1120
				L 230, 1070
				L 160, 880
				L 170, 770
				L 260, 640
				L 350, 710
				L 360, 820
				Z
				M 340, 1050
				L 390, 820
				L 450, 710
				L 450, 810
				Z
			"/>
		</clipPath>
	</defs>
</svg>
<style type="text/css">
a {
	display: block;
	width: 1500px;
	height: 1500px;
	background: black;
	transition: all .2s;
	font-size: 0;
    clip-path: url(#c1);
}
a:hover {
	background: lime;
}
</style>
<a href="#1">Click me...</a>

Upvotes: 2

Related Questions