{"id":1389,"date":"2026-08-21T14:59:23","date_gmt":"2026-08-21T12:59:23","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1389"},"modified":"2026-08-24T18:46:49","modified_gmt":"2026-08-24T16:46:49","slug":"dessine-au-doigt-ou-a-la-souris","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/08\/21\/dessine-au-doigt-ou-a-la-souris\/","title":{"rendered":"Dessine au doigt ou \u00e0 la souris&#8230;"},"content":{"rendered":"\n<iframe width=\"100%\" height=\"720\" style=\"width:100%;max-width:100%;height:720px;border:0;display:block;background:#ffffff\" srcdoc=\"<!DOCTYPE html>\n<html lang=&quot;fr&quot;>\n<head>\n<meta charset=&quot;utf-8&quot;\/>\n<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,user-scalable=no&quot;\/>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nhtml,body{height:100%;background:#ffffff;font-family:ui-sans-serif,system-ui,sans-serif}\nbody{display:flex;flex-direction:column;gap:8px;padding:8px}\n.bar{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:4px 0;background:#ffffff;border:0;flex:0 0 auto;width:100%!important}\n.left{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;width:100%}\n.bar button{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;font:700 14px\/1 ui-sans-serif,system-ui,sans-serif}\n.ico{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;color:#000}\n.sw{width:32px;height:32px;border-radius:50%;border:2px solid #000000;padding:0;flex:0 0 auto}\n.sw.on{box-shadow:0 0 0 2px #ffffff,0 0 0 4px #000000}\n.sz{width:32px;height:32px;border-radius:8px;border:2px solid #000000;background:#ffffff;color:#000000;display:grid;place-items:center;padding:0;flex:0 0 auto}\n.sz.on{background:#000000;color:#ffffff}\n.sz i{display:block;border-radius:50%;background:currentColor}\n.act{height:32px;padding:0 10px;border-radius:8px;border:2px solid #000000;background:#000000;color:#ffffff;display:inline-flex;align-items:center;gap:6px;font:700 13px\/1 ui-sans-serif,system-ui,sans-serif;flex:0 0 auto}\n.right{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;flex:0 0 auto}\n.grow{flex:1 1 auto}\n.sheet{position:relative;flex:1 1 auto;min-height:0;background:#ffffff;border:2px solid #000000}\n.logo{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);height:28px;width:auto;pointer-events:none;user-select:none;z-index:2}\ncanvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;background:#ffffff}\n<\/style>\n<\/head>\n<body>\n<div class=&quot;bar&quot;>\n<div class=&quot;left&quot;>\n<span class=&quot;ico&quot;><svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><circle cx=&quot;13.5&quot; cy=&quot;6.5&quot; r=&quot;.5&quot; fill=&quot;currentColor&quot;\/><circle cx=&quot;17.5&quot; cy=&quot;10.5&quot; r=&quot;.5&quot; fill=&quot;currentColor&quot;\/><circle cx=&quot;8.5&quot; cy=&quot;7.5&quot; r=&quot;.5&quot; fill=&quot;currentColor&quot;\/><circle cx=&quot;6.5&quot; cy=&quot;12.5&quot; r=&quot;.5&quot; fill=&quot;currentColor&quot;\/><path d=&quot;M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z&quot;\/><\/svg><\/span>\n<button type=&quot;button&quot; class=&quot;sw on&quot; data-c=&quot;#000000&quot; style=&quot;background:#000000&quot;><\/button>\n<button type=&quot;button&quot; class=&quot;sw&quot; data-c=&quot;#ffffff&quot; style=&quot;background:#ffffff&quot;><\/button>\n<button type=&quot;button&quot; class=&quot;sw&quot; data-c=&quot;#33ffff&quot; style=&quot;background:#33ffff&quot;><\/button>\n<button type=&quot;button&quot; class=&quot;sw&quot; data-c=&quot;#ff33ff&quot; style=&quot;background:#ff33ff&quot;><\/button>\n<span class=&quot;ico&quot;><svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M12 20h9&quot;\/><path d=&quot;M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z&quot;\/><\/svg><\/span>\n<button type=&quot;button&quot; class=&quot;sz&quot; data-s=&quot;1&quot;><i style=&quot;width:6px;height:6px&quot;><\/i><\/button>\n<button type=&quot;button&quot; class=&quot;sz on&quot; data-s=&quot;3&quot;><i style=&quot;width:11px;height:11px&quot;><\/i><\/button>\n<button type=&quot;button&quot; class=&quot;sz&quot; data-s=&quot;5&quot;><i style=&quot;width:16px;height:16px&quot;><\/i><\/button>\n<\/div>\n<div class=&quot;right&quot;>\n<button type=&quot;button&quot; class=&quot;act&quot; id=&quot;sv&quot;><svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4&quot;\/><polyline points=&quot;7 10 12 15 17 10&quot;\/><line x1=&quot;12&quot; x2=&quot;12&quot; y1=&quot;15&quot; y2=&quot;3&quot;\/><\/svg> Sauvegarder<\/button>\n<button type=&quot;button&quot; class=&quot;act&quot; id=&quot;clr&quot;><svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M3 6h18&quot;\/><path d=&quot;M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6&quot;\/><path d=&quot;M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2&quot;\/><\/svg> Effacer<\/button>\n<\/div>\n<\/div>\n<div class=&quot;sheet&quot;><canvas id=&quot;c&quot; width=&quot;800&quot; height=&quot;600&quot;><\/canvas><img class=&quot;logo&quot; src=&quot;https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/07\/LOGO_ICONOCLASTE_SEUL_1LIGNE2-scaled.png&quot;><\/div>\n<script>\n(function(){\nvar c=document.getElementById(&quot;c&quot;),ctx=c.getContext(&quot;2d&quot;,{willReadFrequently:true});\nvar color=&quot;#000000&quot;,size=3,drawing=false,pts=[],pid=null,base=null,paper=&quot;#ffffff&quot;,dirty=false,H=600,space=false,panning=false,panOrigin=null,panBase=null;\nc.tabIndex=0;\nfunction css(){var r=c.getBoundingClientRect();return {w:Math.max(1,r.width),h:Math.max(1,r.height||H)};}\nfunction fill(){ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.globalCompositeOperation=&quot;source-over&quot;;ctx.globalAlpha=1;ctx.fillStyle=paper;ctx.fillRect(0,0,c.width,c.height);ctx.restore();}\nfunction hint(){fill();ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.fillStyle=&quot;#888888&quot;;ctx.font=&quot;16px sans-serif&quot;;ctx.textAlign=&quot;center&quot;;ctx.textBaseline=&quot;middle&quot;;var x=c.width\/2,y=c.height\/2,mw=c.width*0.9;ctx.fillText(&quot;Exprime ton iconoclasme&quot;,x,y-12,mw);ctx.fillText(&quot;avec ton doigt ou ta souris !&quot;,x,y+12,mw);ctx.restore();}\nfunction fit(){var s=css(),ratio=Math.min(window.devicePixelRatio||1,2);var nw=Math.max(1,Math.round(s.w*ratio)),nh=Math.max(1,Math.round(s.h*ratio));if(c.width===nw&amp;&amp;c.height===nh)return;var bak=null;if(c.width>0&amp;&amp;dirty){bak=document.createElement(&quot;canvas&quot;);bak.width=c.width;bak.height=c.height;var g=bak.getContext(&quot;2d&quot;);if(g)g.drawImage(c,0,0);}c.width=nw;c.height=nh;if(bak){ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.drawImage(bak,0,0,nw,nh);ctx.restore();}else hint();}\nfunction xy(e){var r=c.getBoundingClientRect();var t=(e.touches&amp;&amp;e.touches[0])||(e.changedTouches&amp;&amp;e.changedTouches[0])||e;return {x:(t.clientX-r.left)*(c.width\/Math.max(1,r.width)),y:(t.clientY-r.top)*(c.height\/Math.max(1,r.height))};}\nfunction style(){var sc=c.width\/Math.max(1,css().w);ctx.lineCap=&quot;round&quot;;ctx.lineJoin=&quot;round&quot;;ctx.lineWidth=Math.max(1,size*sc);ctx.globalCompositeOperation=&quot;source-over&quot;;ctx.strokeStyle=color;ctx.fillStyle=color;ctx.globalAlpha=1;}\nfunction paint(){if(base){ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.putImageData(base,0,0);ctx.restore();}style();if(pts.length===1){ctx.beginPath();ctx.arc(pts[0].x,pts[0].y,ctx.lineWidth\/2,0,Math.PI*2);ctx.fill();return;}ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);if(pts.length===2)ctx.lineTo(pts[1].x,pts[1].y);else{for(var i=1;i<pts.length-1;i++)ctx.quadraticCurveTo(pts[i].x,pts[i].y,(pts[i].x+pts[i+1].x)\/2,(pts[i].y+pts[i+1].y)\/2);ctx.lineTo(pts[pts.length-1].x,pts[pts.length-1].y);}ctx.stroke();}\nfunction cursor(){c.style.cursor=panning?&quot;grabbing&quot;:space?&quot;grab&quot;:&quot;crosshair&quot;;}\nfunction applyPan(dx,dy){if(!panBase)return;fill();ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.drawImage(panBase,dx,dy);ctx.restore();}\nfunction down(e){if(e.button&amp;&amp;e.button!==0)return;if(e.cancelable)e.preventDefault();try{c.focus();}catch(err){}if(c.setPointerCapture&amp;&amp;e.pointerId!=null){try{c.setPointerCapture(e.pointerId);}catch(err){}}pid=e.pointerId!=null?e.pointerId:1;if(space){panning=true;panOrigin=xy(e);panBase=document.createElement(&quot;canvas&quot;);panBase.width=c.width;panBase.height=c.height;var g=panBase.getContext(&quot;2d&quot;);if(g)g.drawImage(c,0,0);cursor();return;}drawing=true;if(!dirty){fill();dirty=true;}pts=[xy(e)];try{base=ctx.getImageData(0,0,c.width,c.height);}catch(err){base=null;}paint();}\nfunction move(e){if(e.pointerId!=null&amp;&amp;pid!==e.pointerId)return;if(e.cancelable)e.preventDefault();if(panning&amp;&amp;panOrigin){var p=xy(e);applyPan(p.x-panOrigin.x,p.y-panOrigin.y);return;}if(!drawing)return;var p=xy(e),l=pts[pts.length-1];if(l){var dx=p.x-l.x,dy=p.y-l.y;if(dx*dx+dy*dy<0.6)return;}pts.push(p);paint();}\nfunction up(e){if(e.pointerId!=null&amp;&amp;pid!==e.pointerId)return;drawing=false;panning=false;panOrigin=null;panBase=null;pid=null;pts=[];base=null;cursor();}\nfunction bind(el,t,fn){el.addEventListener(t,fn,{passive:false});}\nbind(c,&quot;pointerdown&quot;,down);bind(c,&quot;pointermove&quot;,move);bind(c,&quot;pointerup&quot;,up);bind(c,&quot;pointercancel&quot;,up);\nc.addEventListener(&quot;contextmenu&quot;,function(e){e.preventDefault();});\nwindow.addEventListener(&quot;keydown&quot;,function(e){if(e.code!==&quot;Space&quot;&amp;&amp;e.key!==&quot; &quot;)return;e.preventDefault();e.stopPropagation();if(e.repeat||drawing)return;space=true;try{c.focus();}catch(err){}cursor();},true);\nwindow.addEventListener(&quot;keyup&quot;,function(e){if(e.code!==&quot;Space&quot;&amp;&amp;e.key!==&quot; &quot;)return;e.preventDefault();space=false;if(!panning)cursor();},true);\nwindow.addEventListener(&quot;blur&quot;,function(){space=false;if(!panning)cursor();});\ndocument.querySelectorAll(&quot;[data-c]&quot;).forEach(function(b){b.addEventListener(&quot;click&quot;,function(){color=b.getAttribute(&quot;data-c&quot;);document.querySelectorAll(&quot;[data-c]&quot;).forEach(function(x){x.classList.remove(&quot;on&quot;);});b.classList.add(&quot;on&quot;);});});\ndocument.querySelectorAll(&quot;[data-s]&quot;).forEach(function(b){b.addEventListener(&quot;click&quot;,function(){size=parseInt(b.getAttribute(&quot;data-s&quot;),10)||3;document.querySelectorAll(&quot;[data-s]&quot;).forEach(function(x){x.classList.remove(&quot;on&quot;);});b.classList.add(&quot;on&quot;);});});\ndocument.getElementById(&quot;clr&quot;).addEventListener(&quot;click&quot;,function(){dirty=false;hint();});\ndocument.getElementById(&quot;sv&quot;).addEventListener(&quot;click&quot;,function(){\nvar out=document.createElement(&quot;canvas&quot;);out.width=c.width;out.height=c.height;var g=out.getContext(&quot;2d&quot;);if(!g)return;g.drawImage(c,0,0);\nvar logo=document.querySelector(&quot;.logo&quot;);\nif(logo&amp;&amp;logo.complete&amp;&amp;logo.naturalWidth){\nvar cr=c.getBoundingClientRect(),lr=logo.getBoundingClientRect();\nvar sx=c.width\/Math.max(1,cr.width),sy=c.height\/Math.max(1,cr.height);\ntry{g.drawImage(logo,(lr.left-cr.left)*sx,(lr.top-cr.top)*sy,lr.width*sx,lr.height*sy);}catch(err){}\n}\nfunction dump(can){can.toBlob(function(blob){if(!blob)return;var a=document.createElement(&quot;a&quot;);a.href=URL.createObjectURL(blob);a.download=&quot;iconoclaste.png&quot;;a.click();setTimeout(function(){URL.revokeObjectURL(a.href);},1500);},&quot;image\/png&quot;);}\ntry{dump(out);}catch(err){dump(c);}\n});\nif(window.ResizeObserver)new ResizeObserver(function(){if(!drawing&amp;&amp;!panning)fit();}).observe(c.parentNode);\nfit();\ncursor();\n})();\n<\/script>\n<\/body>\n<\/html>\n\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Une petite exp\u00e9rience bas\u00e9e sur le photo-fuzzo-shop de 2006.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une petite exp\u00e9rience bas\u00e9e sur le photo-fuzzo-shop de 2006.<\/p>\n","protected":false},"author":1,"featured_media":1405,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[269],"tags":[22,311,81],"class_list":["post-1389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiences","tag-dessin","tag-dessin-au-doigt","tag-fuzzout"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":17,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1389\/revisions"}],"predecessor-version":[{"id":1409,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1389\/revisions\/1409"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media\/1405"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}