{"id":3492,"date":"2017-11-11T09:54:07","date_gmt":"2017-11-11T08:54:07","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=3492"},"modified":"2017-11-11T09:54:19","modified_gmt":"2017-11-11T08:54:19","slug":"raphael-js-or-kinetic","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2017\/11\/11\/raphael-js-or-kinetic\/","title":{"rendered":"Raphael.js or Kinetic?"},"content":{"rendered":"\n<p>The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization.<br \/> So it really depends on what kind of project you are doing. <\/p>\n\n\n\n<p>Here are some useful links which you should check out regarding SVG vs Canvas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li><a href=\"http:\/\/blogs.msdn.com\/b\/ie\/archive\/2011\/04\/22\/thoughts-on-when-to-use-canvas-and-svg.aspx\">Thoughts on when to use Canvas and SVG<\/a> (also describes a hybrid approach)<\/li>\n    <li>Simon Sarris excellent <a href=\"https:\/\/stackoverflow.com\/a\/5883032\/356594\">reply<\/a> in this stackoverflow thread (I also posted some <a href=\"https:\/\/stackoverflow.com\/a\/5895577\/356594\">benchmarks<\/a> between SVG and canvas in the same thread)<\/li>\n<\/ul>\n\n\n\n<p>To summarize: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li>If you want to create some interactive charts I would go with RaphaelJS because it&#x27;s easier to do that with SVG (KineticJS does provide some abstract API which should make it fairly easy to do that too). <\/li>\n    <li>If you want to visualize huge numbers of shapes\/objects I would recommend to use KineticJS as canvas scales usually better with huge numbers of shapes\/objects to be drawn and KineticJS uses multiple layers to improve rendering performance. <\/li>\n<\/ul>\n\n\n\n<p>Good advice from the almighty <a href=\"https:\/\/stackoverflow.com\/questions\/9015221\/kineticjs-vs-raphaeljs\">https:\/\/stackoverflow.com\/questions\/9015221\/kineticjs-vs-raphaeljs<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">The biggest difference between RaphaelJS and KineticJS is that RaphaelJS uses SVG and KineticJS uses HTML5 Canvas for visualization. So it really depends on what kind of project you are doing. Here are some useful links which you should check out regarding SVG vs Canvas: Thoughts on when to use Canvas and SVG (also describes&hellip;<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"https:\/\/monodes.com\/predaelli\/2017\/11\/11\/raphael-js-or-kinetic\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[50,46],"tags":[],"class_list":["post-3492","post","type-post","status-publish","format-standard","hentry","category-javascript","category-web"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-Uk","jetpack-related-posts":[{"id":4426,"url":"https:\/\/monodes.com\/predaelli\/2018\/07\/05\/svg-pan-zoomreadme-md-at-master-%c2%b7-ariuttasvg-pan-zoom-%c2%b7-github\/","url_meta":{"origin":3492,"position":0},"title":"svg-pan-zoom\/README.md at master \u00b7 ariutta\/svg-pan-zoom \u00b7 GitHub","author":"Paolo Redaelli","date":"2018-07-05","format":false,"excerpt":"https:\/\/github.com\/ariutta\/svg-pan-zoom\/blob\/master\/README.md This would be useful for my forthcoming Monodes Beams","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1844,"url":"https:\/\/monodes.com\/predaelli\/2016\/10\/26\/inkscape-bug-485269-strange-black-boxes\/","url_meta":{"origin":3492,"position":1},"title":"Inkscape Bug #485269 \u2013 Strange Black Boxes","author":"Paolo Redaelli","date":"2016-10-26","format":false,"excerpt":"Oh my. I've started using Inkscape to review some lecture's notes and I soon hit Inkscape Bug #485269 \u2013 Strange Black Boxes Those black boxes pop up and do not go away. Learn to make them disappear. Text become black boxes. As a temporary workaround I exported it as PNG.\u2026","rel":"","context":"In &quot;Senza categoria&quot;","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"inkscape-bug","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2016\/10\/inkscape-bug-510x466-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2027,"url":"https:\/\/monodes.com\/predaelli\/2016\/12\/19\/2577-free-svg-and-png-icons-for-your-games-or-apps-game-icons-net\/","url_meta":{"origin":3492,"position":2},"title":"2577 free SVG and PNG icons for your games or apps | Game-icons.net","author":"Paolo Redaelli","date":"2016-12-19","format":false,"excerpt":"Sorgente: 2577 free SVG and PNG icons for your games or apps | Game-icons.net","rel":"","context":"In &quot;Senza categoria&quot;","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5439,"url":"https:\/\/monodes.com\/predaelli\/2019\/04\/05\/3540-free-svg-and-png-icons-for-your-games-or-apps-game-icons-net\/","url_meta":{"origin":3492,"position":3},"title":"3540 free SVG and PNG icons for your games or apps | Game-icons.net","author":"Paolo Redaelli","date":"2019-04-05","format":"link","excerpt":"https:\/\/game-icons.net\/","rel":"","context":"In &quot;Senza categoria&quot;","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14169,"url":"https:\/\/monodes.com\/predaelli\/2025\/10\/24\/how-to-emulate-hand-drawn-shapes-algorithms-behind-roughjs-shihn-ca\/","url_meta":{"origin":3492,"position":4},"title":"How to emulate hand-drawn shapes \/ Algorithms behind RoughJS | shihn.ca","author":"Paolo Redaelli","date":"2025-10-24","format":false,"excerpt":"How to emulate hand-drawn shapes \/ Algorithms behind RoughJS | shihn.ca A dive into graphics algorithms used in RoughJS - A graphics library that lets you draw in a sketchy, hand-drawn-like, style. How to emulate hand-drawn shapes \/ Algorithms behind RoughJS A dive into graphics algorithms used in RoughJS -\u2026","rel":"","context":"In &quot;Documentations&quot;","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2025\/10\/cover.png?fit=480%2C480&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13545,"url":"https:\/\/monodes.com\/predaelli\/2025\/06\/08\/thorvg-thor-vector-graphics\/","url_meta":{"origin":3492,"position":5},"title":"ThorVG | Thor Vector Graphics","author":"Paolo Redaelli","date":"2025-06-08","format":false,"excerpt":"ThorVG | Thor Vector Graphics (ThorVG) is an open-source, lightweight, and portable library designed for rendering vector-based scenes and animations, including SVG and Lottie formats \u00a0","rel":"","context":"In &quot;Liberty Eiffel&quot;","block_context":{"text":"Liberty Eiffel","link":"https:\/\/monodes.com\/predaelli\/category\/eiffel\/liberty-eiffel\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/3492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=3492"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/3492\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=3492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=3492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=3492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}