Skip to main content
Inspiring
February 20, 2022
Question

HTML5 Canvas - Duplicate symbol, resize and change position in JavaScript

  • February 20, 2022
  • 1 reply
  • 161 views

In HTML5 Canvas, how would you duplicate, resize and change position (all at once) of a graphic symbol in JavaScript?

 

So, the symbol to duplicate is `LensMagSymbolIcon`. Lets say I also want to resize that symbol 5 times, or to 279.3px wide and 318.65px high, and move to some X Y position.

 

This will be initiated by selecting an option from a ComboBox.

 

this.transformLens = function(){
//duplicate,resize and reposition stuff

}

if(!this.LensMagCombo_1_change_cbk) {
function LensMagCombo_1_change(evt) {
if(evt.target.value == '2.50'){
// Call duplicate and resize function
this.transformLens();
//
}
}
$("#dom_overlay_container").on("change", "#LensMagCombo_1", LensMagCombo_1_change.bind(this));
this.LensMagCombo_1_change_cbk = true;
}

 

    This topic has been closed for replies.

    1 reply

    FlatChatAuthor
    Inspiring
    February 20, 2022

    Just realised an easier way to do this rather than cloning a graphic symbol, and potentially adding heaps of them tothe library. which I don't want to do...  

     

    So given the limited number of symbols needed, I will just create them and move them off stage, to reapper on stage when required.