SO canvas & HTML

by Alon Rotem

HTML

<div id="picture">

    <canvas id="canvas" width="500" height="500">
    </canvas>

    <div class="blob1"><a href="https://www.google.com" target="_blank">X</a></div>
    <div class="blob2">test</div>
    
</div>

CSS

#picture {
    position: relative;
}


.blob, .blob1, .blob2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: green;
    border: 2px solid #ccc;
}

.blob1 {
    top: 130px;
    left: 90px;
}

.blob2 {
    top: 30px;
    left: 340px;
}

JavaScript

var canvas = document.querySelector('canvas');
 var context = canvas.getContext('2d');

 context.beginPath();
 context.moveTo(100, 150);
 context.lineTo(350, 50);
 context.stroke();