5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Taa0,

Drop Interactive Drawing Canvas Component onto any page and let visitors draw, sketch, and fill shapes directly on your site. Works seamlessly across desktop and mobile with both touch and pointer input.

Includes a pencil tool with three styles, seven shape primitives, text with multiple fonts, dot grid, and an eraser with undo and redo support. The fill bucket works on any enclosed region bounded by strokes—not just predefined shapes.

Users can drag to select and move multiple elements together, creating a smooth and intuitive interaction experience.

What makes it different: every tool icon (pencil, eraser, fill, select, shapes, text, undo, redo, clear) supports custom SVG uploads directly in the property panel. The on-canvas cursor automatically updates to match—so every implementation can feel completely unique.

Features

Smooth drawing with three styles
Seven built-in shape tools
Fill bucket with real flood fill
Text tool with multiple fonts
Eraser tool
Multi-select via drag
Undo / Redo support
Dot grid background
Works on desktop and mobile
Custom color palette (up to 25 colors)
Adjustable toolbar position and scale
Custom icon system with matching cursors

Use it for

Hero sections
404 pages
Portfolio interactions
Playful UI experiences
Any place where you want users to engage and interact with your website

Changelog

1.0.0 — Initial releaseDrawing, shapes, fill bucket with flood fill, text, eraser, multi-select, custom icons with cursor swap, mobile support.

Future Updates

This component will continue to evolve with new features, improvements, and refinements based on feedback. Purchasing now gives you access to all upcoming updates as the component grows.For support : design@vikramuiux.com

5a:[["$","$L5d",null,{"post":{"id":"019e0204-54bc-72e1-b851-3f093bb0ca76","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0ae2481a-d862-4f17-86a7-d8b9373e7666","name":"ARUNVIKRAM S","slug":"arunvikram-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/40464/avatar-PjkCmAobqyQiSDQiBWYhH0I8Yo4unx.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"p0c2fO7GrrATNNFVh1K6","resolved":true,"title":"Interactive Artboard","body":"$5e","bodyJson":null,"introduction":"Interactive Drawing Canvas","slug":"interactive-artboard","author":{"framerUserId":"0ae2481a-d862-4f17-86a7-d8b9373e7666","name":"ARUNVIKRAM S","slug":"arunvikram-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/40464/avatar-PjkCmAobqyQiSDQiBWYhH0I8Yo4unx.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/p0c2fO7GrrATNNFVh1K6/interactive-artboard-SWyeXD56WiU6ZPqX0ohGyQPH0eXLLX","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-10T03:51:59.035Z","updatedAt":"2026-09-07T04:37:18.648Z","publishedAt":"2026-05-07T10:38:18.812Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://specific-fruit-994156.framer.app/","price":"2","paymentUrl":"https://buy.polar.sh/polar_cl_2FF93mpDE4u6wyJcBjGSPDPGX0DAMEULXSyFD258BGq","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"XOos3iPFwWzTPu4s0EnE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":21,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-07T10:38:18.812Z","updatedAt":"2026-05-07T10:38:18.812Z","reported":false}}],"$L5f"]

Suggested for you