- ×
Cartoon style drawing for HTML5 Canvas & Raphael.js & D3.js & SVG.js
Filed under images › 2d graphicsShow Allcomic.js
Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing. Try it in the comic.js lab.
Provides either methods for drawing comic style shapes (
cEllipse
,cLine
,cRect
, ...) or themagic
method for cartoonizing an already existing SVG. When using themagic
method or drawing on acanvas
no further libraries are required.Examples
Cartoonized D3 examples: D3 Cartoonized!
Cartoon R widget built by Kent Russell using
comic.js
: R Cartoonized!using raphael.js, d3.js, svg.js and canvas: comic.js lab
using "magic": on images, on drawings
NOTE
Chrome versions > 48.x need a polyfill for the missing
pathSegList
API to make themagic
method ofcomic.js
work. This means you have to getpathseg.js
here and include it in your site via<script type="text/javascript" src="pathseg.js"></script>
.Usage
Simply include
comic.min.js
after including one of the supported libraries (Raphael.js, D3.js, SVG.js) - or none of them if you are using a HTML5 Canvas or just themagic
function for images. Then it can be used as follows, assuming that you have a containerdiv
orcanvas
with idpaper
where needed:The "magic" function universally goes:
// for images COMIC.magic([ document.getElementById('img1'), document.getElementById('img2') ]); // for drawings shapes.magic(); // where "shapes" is a drawing group created on "paper" // via the lib of your choice (see examples below)
Drawing depending on the lib you use:
// Raphael.js paper = Raphael("paper", width, height); stuff = paper.set();
or
// D3.js paper = d3.select("#paper").append('svg'); stuff = paper.append("g");
or
// SVG.js paper = SVG('paper').size(width, height); stuff = paper.group();
or
// canvas paper = document.getElementById("paper"); ctx = paper.getContext("2d"); // IMPORTANT: here we bind comic.js to the canvas context COMIC.ctx(ctx);
and then for the SVG libs (SVG.js, D3.js, Raphael.js):
// these are the default values if you do not call "init" // NOTE: values have changed with beta5 COMIC.init({ ff: 8, // fuzz factor for line drawing: bigger -> fuzzier ffc: 5, // fuzz factor for curve drawing: bigger -> fuzzier fsteps: 5, // number of pixels per step: smaller -> fuzzier msteps: 3, // min number of steps: bigger -> fuzzier }); // lets draw! stuff.cLine(x1, y1, x2, y2); // LINE from starting point to end point stuff.cTrian(x1, y1, x2, y2, x3, y3); // TRIANGLE over three corner points stuff.cRect(x1, y1, width, height, rh, rv); // RECTANGLE at upper left point (x1, y1) with // width & height and with rounded (elliptic) corners // with horizontal radius rh & vertical radius rv stuff.cBezier2(x1, y1, cx, cy, x2, y2); // BEZIER (quadratic) curve with start point (x1, y1), // control point (cx, cy) and end point (x2, y2) stuff.cBezier3(x1, y1, cx1, cy1, cx2, cy2, x2, y2); // BEZIER (cubic) curve with start point // (x1, y1), control points (cx1, cy1) & (cx2, cy2) // and end point (x2, y2) stuff.cCircle(x1, y1, r, start, end); // CIRCLE at center point (x1, y1) with radius r and drawn // starting from 0 < start < 2*PI to 0 < end < 2*PI stuff.cEllipse(x1, y1, rh, rv, rot, start, end); // ELLIPSE at center point with horizontal radius // rh & vertical radius rv, rotation 0 < rot < 2*PI // and drawn from 0 < start < 2*PI to 0 < end < 2*PI // changing the look stuff.attr({ "stroke":"#E0AE9F", "stroke-width": 2, "fill": "none" });
Beyond this all depends on your choice of library - e.g. translation:
// Raphael.js stuff.transform("t100,100r45"); // D3.js stuff.attr({ "transform":"translate(30) rotate(45)" }); // SVG.js stuff.transform({ x:100, y:100, rotation:45 });
For the HTML5 Canvas almost everything works identically. However to change the looks:
// changing the look ctx.strokeStyle = "#FDD1BD"; ctx.lineWidth = 3; ctx.globalCompositeOperation = 'destination-over';
While the drawing works exactly as above:
// lets draw! stuff.cLine(x1, y1, x2, y2) .cTrian(x1, y1, x2, y2, x3, y3) .cRect(x1, y1, width, height);
All further things should work the default way of your chosen library. I have done little experiments though and errors are probable - please let me know if you encounter any.
Credits
Inspired by and based on Jonas Wagner's work which is based on this paper