How to make html5 canvas shape resizable - html

Question

check out: http://jsfiddle.net/aqaP7/4/,
and
http://shedlimited.debrucellc.com/test3/canvaskinclip.html,
I want to make html5 images resizable,
and it needs to be based on the html5 etc because my clipping region is in html5
I think that it will have to do with the mousedown events, but how for example can I tell if the
mouse is on the corner of the shape? Can I just add the code to my circle - mousedown function?
circle.on("mousedown", function(){
draggingShape = this;
var mousePos = stage.getMousePosition();
draggingRectOffsetX = mousePos.x - circle._x;
draggingRectOffsetY = mousePos.y - circle._y;
});
circle.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
circle.on("mouseout", function(){
document.body.style.cursor = "default";
});
layer.add(circle);
stage.on("mouseout", function(){
draggingShape = undefined;
}, false);
stage.on("mousemove", function(){
var mousePos = stage.getMousePosition();
if (draggingShape) {
draggingShape._x = mousePos.x - draggingRectOffsetX;
draggingShape._y = mousePos.y - draggingRectOffsetY;
layer.draw();
}

Answer 1

Take a look at this canvas tutorial:
Take a look at this tutorial
Here is some simple code to get you started:
var anchor;
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: "#666",
fill: "#ddd",
strokeWidth: 2,
radius: 8,
name: name,
draggable: true
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on("mouseover", function() {
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setStrokeWidth(4);
layer.draw();
});
anchor.on("mouseout", function() {
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
Essentially, you want to add anchors to a shape on click, then use those anchors for resizing.