Hi crejesh,
Refer the below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.tools a
{
text-decoration: none;
}
#colors_sketch
{
border: 1px solid #ccc;
width: 100%;
}
</style>
</head>
<body>
<div class="tools">
<a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200">
</canvas>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
});
var width = 800;
var height = 450;
var scaleFactor = 1;
if (screen.width < 800) {
scaleFactor = 0.8;
} else if (screen.width > 1200) {
scaleFactor = 1.2;
}
width = width * scaleFactor;
height = height * scaleFactor;
var canvas = new fabric.Canvas('canvas');
canvas.setWidth(width);
canvas.setHeight(height);
canvas.calcOffset();
if (scaleFactor != 1) {
for (var i = 0; i < canvas._objects.length; i++) {
canvas._objects[i].scale(scaleFactor);
canvas._objects[i].setLeft(canvas._objects[i].left * scaleFactor);
canvas._objects[i].setTop(canvas._objects[i].top * scaleFactor);
}
canvas.renderAll();
}
</script>
</body>
</html>
Demo 