Below is the HTML code used to achieve the graphic above:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// bg
context.save();
context.beginPath();
context.rect(0,0,450,450);
context.fillStyle = "rgb(255, 247, 246)";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "rgb(255, 0, 111)";
context.stroke();
context.restore();
//bg curves
for (var i = 0; i < canvas.height; i+=10){
context.beginPath();
context.moveTo(5, 5);
context.quadraticCurveTo(450, 0, 445, i);
context.lineWidth = 1;
context.strokeStyle = 'pink';
context.stroke();
}
//bg curves
for (var i = 0; i < canvas.height; i+=10){
context.beginPath();
context.moveTo(445, 5);
context.quadraticCurveTo(440, 440, i, 445);
context.lineWidth = 1;
context.strokeStyle = 'pink';
context.stroke();
}
// lollipopBase
context.beginPath();
context.moveTo(331, 249);
context.lineTo(408, 399);
context.bezierCurveTo(408, 399, 409, 406, 400, 404);
context.lineTo(322, 255);
context.lineTo(331, 249);
context.closePath();
context.fillStyle = "rgb(203, 203, 203)";
context.fill();
context.strokeStyle = "rgb(178, 178, 178)";
context.stroke();
// lollipopBase 2
context.beginPath();
context.moveTo(322, 256);
context.bezierCurveTo(322, 256, 312, 259, 307, 259);
context.bezierCurveTo(307, 259, 230, 250, 258, 173);
context.bezierCurveTo(258, 173, 274, 151, 303, 151);
context.bezierCurveTo(303, 151, 370, 167, 345, 238);
context.bezierCurveTo(345, 238, 338, 246, 331, 250);
context.lineTo(322, 256);
context.closePath();
context.fillStyle = "rgb(185, 34, 72)";
context.fill();
// stickShade
context.beginPath();
context.moveTo(330, 254);
context.bezierCurveTo(329, 253, 328, 253, 327, 253);
context.lineTo(327, 253);
context.bezierCurveTo(326, 254, 326, 255, 326, 256);
context.lineTo(402, 400);
context.bezierCurveTo(402, 401, 404, 402, 405, 401);
context.lineTo(405, 401);
context.bezierCurveTo(406, 401, 406, 399, 405, 398);
context.lineTo(330, 254);
context.closePath();
context.fillStyle = "rgb(244, 244, 244)";
context.fill();
// shade1
context.beginPath();
context.moveTo(345, 238);
context.bezierCurveTo(345, 238, 359, 223, 355, 195);
context.bezierCurveTo(355, 195, 347, 153, 302, 151);
context.bezierCurveTo(302, 151, 366, 167, 345, 238);
context.closePath();
context.fillStyle = "rgb(204, 38, 79)";
context.fill();
// shade1_2
context.beginPath();
context.moveTo(258, 173);
context.bezierCurveTo(258, 173, 232, 206, 263, 243);
context.bezierCurveTo(263, 243, 280, 261, 307, 259);
context.bezierCurveTo(307, 259, 238, 246, 258, 173);
context.closePath();
context.fillStyle = "rgb(147, 27, 57)";
context.fill();
// shade2
context.beginPath();
context.moveTo(349, 199);
context.bezierCurveTo(349, 199, 345, 192, 345, 190);
context.bezierCurveTo(344, 189, 341, 178, 339, 180);
context.bezierCurveTo(337, 182, 322, 206, 303, 185);
context.lineTo(256, 210);
context.bezierCurveTo(256, 210, 261, 232, 272, 240);
context.lineTo(349, 199);
context.closePath();
context.fillStyle = "rgb(204, 38, 79)";
context.fill();
// shade3
context.beginPath();
context.moveTo(256, 210);
context.bezierCurveTo(256, 210, 262, 235, 272, 240);
context.bezierCurveTo(272, 240, 265, 240, 263, 244);
context.bezierCurveTo(263, 244, 251, 240, 249, 229);
context.bezierCurveTo(249, 229, 244, 221, 248, 213);
context.lineTo(256, 210);
context.closePath();
context.fillStyle = "rgb(185, 34, 72)";
context.fill();
// shade4
context.beginPath();
context.moveTo(303, 185);
context.lineTo(340, 167);
context.bezierCurveTo(340, 167, 358, 174, 354, 194);
context.bezierCurveTo(354, 194, 353, 196, 349, 199);
context.bezierCurveTo(349, 199, 345, 190, 344, 187);
context.bezierCurveTo(344, 187, 341, 179, 339, 180);
context.bezierCurveTo(339, 180, 321, 207, 303, 185);
context.closePath();
context.fillStyle = "rgb(224, 42, 87)";
context.fill();
// mouth
context.beginPath();
context.moveTo(67, 273);
context.bezierCurveTo(67, 273, 118, 217, 124, 215);
context.bezierCurveTo(124, 215, 135, 217, 144, 213);
context.bezierCurveTo(154, 208, 164, 199, 170, 201);
context.bezierCurveTo(170, 201, 177, 196, 187, 174);
context.bezierCurveTo(187, 174, 197, 153, 211, 161);
context.bezierCurveTo(211, 161, 221, 173, 221, 177);
context.bezierCurveTo(221, 177, 232, 223, 219, 241);
context.bezierCurveTo(219, 241, 224, 247, 213, 256);
context.bezierCurveTo(213, 256, 190, 269, 175, 269);
context.bezierCurveTo(175, 269, 124, 283, 122, 283);
context.bezierCurveTo(122, 283, 52, 301, 67, 273);
context.closePath();
context.fillStyle = "rgb(107, 28, 64)";
context.fill();
// lip
context.beginPath();
context.moveTo(52, 279);
context.bezierCurveTo(52, 279, 81, 237, 96, 197);
context.bezierCurveTo(96, 197, 114, 128, 164, 141);
context.bezierCurveTo(164, 141, 174, 143, 182, 136);
context.bezierCurveTo(183, 136, 183, 136, 184, 135);
context.bezierCurveTo(193, 128, 236, 138, 221, 177);
context.bezierCurveTo(221, 177, 209, 157, 204, 160);
context.bezierCurveTo(204, 160, 195, 159, 187, 174);
context.bezierCurveTo(187, 174, 173, 181, 168, 178);
context.bezierCurveTo(168, 178, 133, 195, 124, 215);
context.bezierCurveTo(124, 215, 65, 272, 65, 279);
context.bezierCurveTo(65, 279, 63, 292, 102, 287);
context.bezierCurveTo(102, 287, 122, 283, 124, 283);
context.bezierCurveTo(126, 282, 122, 283, 122, 283);
context.bezierCurveTo(122, 283, 172, 266, 185, 266);
context.bezierCurveTo(185, 266, 226, 256, 219, 241);
context.bezierCurveTo(219, 241, 248, 241, 249, 276);
context.bezierCurveTo(249, 276, 251, 313, 190, 318);
context.bezierCurveTo(190, 318, 114, 326, 60, 286);
context.bezierCurveTo(60, 286, 54, 287, 52, 279);
context.closePath();
context.fillStyle = "rgb(219, 23, 75)";
context.fill();
// lip 2
context.beginPath();
context.moveTo(67, 331);
context.stroke();
// lip 3
context.beginPath();
context.moveTo(147, 254);
context.bezierCurveTo(147, 254, 179, 250, 196, 205);
context.bezierCurveTo(196, 205, 202, 178, 207, 180);
context.bezierCurveTo(207, 180, 202, 176, 207, 168);
context.bezierCurveTo(207, 168, 218, 193, 217, 204);
context.bezierCurveTo(217, 204, 229, 261, 170, 263);
context.bezierCurveTo(170, 263, 133, 264, 147, 254);
context.closePath();
context.fill();
// highlight
context.beginPath();
context.moveTo(124, 215);
context.bezierCurveTo(124, 215, 140, 220, 156, 207);
context.bezierCurveTo(156, 207, 168, 197, 170, 201);
context.bezierCurveTo(170, 201, 179, 200, 187, 174);
context.bezierCurveTo(187, 174, 171, 181, 168, 178);
context.bezierCurveTo(168, 178, 134, 192, 124, 215);
context.closePath();
context.fillStyle = "rgb(252, 251, 252)";
context.fill();
// highlight 2
context.beginPath();
context.moveTo(217, 296);
context.bezierCurveTo(217, 296, 241, 304, 241, 268);
context.bezierCurveTo(241, 268, 241, 261, 235, 258);
context.bezierCurveTo(235, 258, 242, 273, 229, 281);
context.bezierCurveTo(229, 281, 215, 290, 217, 296);
context.closePath();
context.fill();
// highlight 3
context.beginPath();
context.moveTo(173, 308);
context.bezierCurveTo(173, 308, 187, 301, 189, 290);
context.bezierCurveTo(189, 290, 194, 283, 196, 287);
context.bezierCurveTo(196, 287, 190, 285, 193, 303);
context.bezierCurveTo(193, 303, 186, 313, 173, 308);
context.closePath();
context.fill();
// highlight 4
context.beginPath();
context.moveTo(202, 217);
context.bezierCurveTo(202, 217, 214, 222, 211, 195);
context.bezierCurveTo(211, 195, 208, 183, 208, 183);
context.bezierCurveTo(208, 183, 208, 183, 208, 183);
context.bezierCurveTo(208, 183, 207, 197, 205, 203);
context.bezierCurveTo(205, 203, 199, 216, 202, 217);
context.closePath();
context.fill();
// highlight 5
context.beginPath();
context.moveTo(125, 175);
context.bezierCurveTo(125, 175, 142, 154, 159, 153);
context.bezierCurveTo(159, 153, 169, 153, 160, 145);
context.bezierCurveTo(160, 145, 139, 139, 125, 175);
context.closePath();
context.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="450" height="450"></canvas>
</body>
</html>