set image insted of paint ball in javascript

Question

I want to set an image instead of painting the ball

My code is the following

  ballPainter = {
      BALL_FILL_STYLE: 'rgb(255,0,50)',
      BALL_STROKE_STYLE: 'rgb()',

      paint: function (ball, context) { 
         var imageObj = new Image();

         context.save();

         context.shadowColor = undefined;
         context.lineWidth = 2;
         context.fillStyle = this.BALL_FILL_STYLE;
         context.strokeStyle = this.BALL_STROKE_STYLE;

         context.beginPath();
         context.arc(ball.left, ball.top,
                     ball.radius, -1, Math.PI*2, false);

         context.clip();
         context.fill();
         context.stroke();
         context.restore();
      }
    },

You need to draw on canvas or just add circle element (like a div for example) on the page? — ostapische, Jul 18 '14 at 09:57

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

You might want to check http://www.w3schools.com/tags/canvas_drawimage.asp

I'm not sure if you can crop an image to a cricle though (maybe if the image has a transparant background)

*edit apperently you can HTML5 Canvas - Fill circle with image

edited May 23 '17 at 10:25

Community

1
1

answered Jul 18 '14 at 09:38

dwana

413
3
13

thankss can you give me proper code for that ... really i need – user3612421 Jul 19 '14 at 05:45

set image insted of paint ball in javascript

1 Answers1