javascript - How to select particular area in canvas? -


i new canvas, have image myimg.jpg, have converted image canvas , trying apply pattern image heel.

i not able it. here screenshot:

http://i.stack.imgur.com/7apvy.png

how can done.

<div id="myid">   <canvas id="canvaswrapper" width="660" height="540"></canvas> </div> 
 function drawimage(){     var ctx = $("canvas")[0].getcontext("2d"),         img = new image();     img.onload = function(){       ctx.drawimage(img, 0, 0, 500, 500);       ctx.beginpath();       var img2= new image();       var w;       var h;       img2.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=pg";       var pattern = ctx.createpattern(img2, "repeat");       ctx.fillstyle = pattern;       ctx.fillrect(0, 0, w, h);       ctx.arc(300,305,50,0,2*math.pi);       ctx.fill();       ctx.stroke();    };    img.src = "myimg.jpg";   }  drawimage();

you can define area want fill using image mask fits on top of image - step photoshop/gimp.

for example, having shoe as-is:

shoe

create mask leaving heal in original position (it makes easier draw in - can crop , draw using offset instead). important: background must transparent:

mask

then super-impose pattern using these steps:

  1. load pattern , define fill-pattern
  2. draw mask empty canvas
  3. optional step: adjust transformations if needed (translate, scale)
  4. choose composite mode "source-atop"
  5. fill canvas
  6. choose composite mode "destination-atop"
  7. draw main image on top (which show behind mask/pattern)
  8. optional step: draw in original mask image using blending mode "multiply" add shadow , highlights (does not work in ie). creating illusion of depth. ie, drawing on top using reduced alpha or separate image containing shadows etc. can option

result

result

example

var ishoe = new image, imask = new image, ipatt = new image, count = 3;  ishoe.onload = imask.onload = ipatt.onload = loader;  ishoe.src = "http://i.stack.imgur.com/hql1c.png";  imask.src = "http://i.stack.imgur.com/k5xwn.png";  ipatt.src = "http://i.stack.imgur.com/ceq10.png";    function loader() {    if (--count) return;  // wait until images has loaded      var ctx = document.queryselector("canvas").getcontext("2d"),        pattern = ctx.createpattern(ipatt, "repeat");      // draw in mask    ctx.drawimage(imask, 0, 0);        // change comp mode    ctx.globalcompositeoperation = "source-atop";        // fill mask    ctx.scale(0.5, 0.5);                 // scale: 0.5    ctx.fillstyle = pattern;             // remember double area fill:    ctx.fillrect(0, 0, ctx.canvas.width*2, ctx.canvas.height*2);    ctx.settransform(1,0,0,1,0,0);       // reset transform        // draw shoe behind mask    ctx.globalcompositeoperation = "destination-atop";    ctx.drawimage(ishoe, 0, 0);        // make more realistic, add mask in blend mode (does not work in ie):    ctx.globalcompositeoperation = "multiply";    if (ctx.globalcompositeoperation === "multiply") {      ctx.drawimage(imask, 0, 0);    }  }
<canvas width=281 height=340></canvas>


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more