<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
#yLeg {
position:absolute;
top:50px;
left:30px;
width:120px;
text-align:right;
font:15px arial,sans-serif;
}
#xLeg {
position:absolute;
top:170px;
left:290px;
width:120px;
text-align:right;
font:15px arial,sans-serif;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(160, 100);
var controlX1 = 350;
var controlY1 = 70;
var controlX2 = 460;
var controlY2 = -50;
var endX = 488;
var endY = 170;
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 4;
context.strokeStyle = "black"; // line color
context.stroke();
context.moveTo(155, 160);
context.lineTo(550, 160);
context.lineWidth = 0.2;
context.stroke();
context.moveTo(160, 170);
context.lineTo(160, 10);
context.lineWidth = 0.2;
context.stroke();
};
</script>
</head>
<body onmousedown="return false;">
<canvas id="myCanvas" width="578" height="200">
</canvas>
<div id="yLeg">
Social, economic and environmental relevance of the topics in discussion.
</div>
<div id="xLeg">
Alcohol intake.
</div>
</body>
</html>