Jak stworzyć taką aplikację. Opcje

[RosheD]

Witam bardzo serdecznie (IMG:style_emoticons/default/smile.gif) Czuje się już sławny na tym forum po przez tyle zadawanych pytań (IMG:style_emoticons/default/smile.gif) .
Więc jak stworzyć aplikację internetową która na przykład będzie zmieniała na obrazku kolor farby na ścianie po przez wybraną opcje?
Myślałem nad tym i jedyne co mi przychodzi na myśl to wycięcie tej ściany w photoshopie jako 2 obrazki. Później w css zrobić tak aby były idealnie takie same i za każdym razem gdy ktoś wybierze daną opcje wczyta dany obrazek bez refresh dzięki ajax. Ale czy da się to zrobić łatwiej bez konieczności własnoręcznego kolorowania ściany w photoshopie do każdej możliwości ?

[RosheD]

Czyli mniej więcej tak to wprowadzać?

[HTML] pobierz, plaintext 
 <area shape="poly" coords="181, 238, 184, 264, 145, 264, 141, 246" style="background: #eee;" />
    <area shape="poly" coords="144, 265, 181, 268, 182, 277, 149, 277" />
    <area shape="poly" coords="67, 295, 68, 331, 81, 334" />
    <area shape="poly" coords="1, 222, 179, 203, 179, 244, 141, 245, 111, 247, 84, 253, 63, 259, 56, 261, 60, 276, 59, 282, 60, 315, 59, 332, 0, 355" />
    <area shape="poly" coords="4, 17, 1, 0, 496, 0, 498, 73, 258, 91" />
    <area shape="poly" coords="6, 23, 259, 90, 181, 201, 1, 218" />
[HTML] pobierz, plaintext 

I teraz do canvas (wprowadziłem pierwszą linijkę) :

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#000';
c2.beginPath();
c2.moveTo(0, 0);
c2.lineTo(181, 238);
c2.lineTo(184, 264);
c2.lineTo(145, 264);
c2.lineTo(141, 246);
c2.closePath();
c2.fill();