SerzN1

советую посмотреть
tympanus.net/codrops/2013/08/09/building-a-circula...
и просто почаще заходить на этот сайт

есть вариант еще image.complete не отрабатывает, или размеры картинки просто нулевые. кажись в последний раз когда делал подобное - допиливал плагин. попробуйте добавить таймштамп к урлу вроде //blabla.com/img.jpg?312312434 чтобы из кеша не бралось.

TLDR:
1. Удалить jQuery
2. Сделать математическую модель
3. Нарисовать на канвасе (mousedown, mouseup)

вообще что то почитал у вас снизу про сервер - это перебор для обычного вопроса.
человек умеющий делать такие игры может спокойно выкладывать их в магазины и зарабатывать приличные деньги, так как практически каждый пункт "Функциональные требования" является большой самостоятельной задачей и требует определенного опыта для его решения - поскольку игра в первую очередь идет на сервере, а клиент только принимает и передает команды.

если есть возможность - берите готовый сервер.
можно попробовать firebase, но не думаю что он будет соответствовать всем требованиям

PS: это задача не для верстальщика, тут нужно намного больший опыт чем перетаскивание

Без обид, но за 2 года ... по стольким технологиям можно стать ... говнокодером. Без реальных проектов и примеров никуда. Дальше нужно изучать поттерны и делать практическое применение. Сделайте сайт, например, фронт angular, бекенд python. Покажите себя - все смотрят на код. А вот это 70-80% бред на бумаге от высокой самооценки или недостатка опыта. Так обычно пишут люди код которых можно открыть и понять что в каждой 2ой строке что то не так, не говоря уже про само целостное приложение. И еще полностью согласен с L0k1 .

Вы меня извините, но фронтенд === 80+% javascript!
От этого и стоит плясать.
И далее здесь на тостере полно ответов как учить JS!
Все остальное типа JADE - приблуда для ленивых, не знающих про emmet.

Практика, практика и еще раз практика в работе с новыми технологиями для вас.
Это значит берем и внедряем сразу, если не хватает знаний - учим и затем внедряем.

мб для начала вынуть из fill и svg
получается слишком тяжелая связка (точнее не тяжелая а просто неоптимизорованная)

Скорее стоит попробовать канвас для таких извращений
stackoverflow.com/questions/18379818/canvas-image-...
blog.teamtreehouse.com/create-vector-masks-using-t...
и использовать animationFrame

Я точно знаю тот редактор который вы хотите!
Это Photoshop! Картинку потом можно воткнуть куда угодно!

типичный пример центрирования картинки в блоке заданного размера (можно в процентах)
jsfiddle.net/SerzN1/s3fLutz5/1

ИМХО:
IDE
brackets - для быстрых проектов (minify, coffee, less, autoprefixer и так далее)
webstorm - для серьзных проектов
sublime - ни туда ни сюда (не понимаю за что его выбирают, сам использовал обплевался, НЕ НАДО ПИСАТЬ МНЕ ЧТО НЕ УМЕЮ ГОТОВИТЬ)

Косметика
Photoshop (psd), Illustrator (svg), fireworks (векторные макеты), Clip2Net (отличная пипетка по Win+W и скриншотер с подсказками). а так же рекомендую смотреть в сторону визуальных редакторов с выдачей кода если позволяет техника и деньги , тк они в основном под мак (avocode, brackets extract, sketch и тп), так как простая нарезка стремных макетов с приветом из 90х во времена масштабиреуемой графики и ориентирования на контент никому не нужны.

Сервер
XAMPP или любой подходящий вариант под ваш стек от bitnami вплоть до MEAN

Гит!

htmlbook.ru/html/iframe/sandbox хороший параметр, но работает не везде

Пользуюсь конечно для этого Bootstrap'ом.

вот в этом весь подвох, пользоваться без понимания происходящего

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
первая же строка дает пояснение как делать отдельный цсс (картинки, фоны и тп можно засунуть в этот цсс в дата-урл или просто грузить нужного размера) + srcset + модульная структура

в foundation есть спец функции foundation.zurb.com/docs/components/interchange.html, что в принципе не сложно самому написать как минимодуль

0. в таких чудесных случаях когда не нужна резина - вырезают просто jpg и кладут в фон
1. в случаях резины - режешь png и позиционируешь абсолютно в % (или left:50% и margin-left:) каждый слой отдельно, а по верху пускаешь интерактивные элементы (ссылки, hover) иногда возможно дублирование элемента (1н отвечает за функционал - ссылка с лого, другой за красоту - картинка лого)

не то и не другое

1. использовать REM для масштабируемых стилей
таким образом вы получаете изменение масштаба сайта 1 строчкой
html { font-size:125%;}

2. использовать % для резиновых стилей
получаем резину по ширине и прочее подобное

3. использовать em для стилей жестко зависящих от размера шрифта
(например вертикальное позиционирование тире перед списком и тп.)
получаем гибкость независимо от размера шрифта

да . в целом получается много и можно запутаться - но в некоторых момента оно того стоит
главное чтобы работало :)

По силам будет?
:) а то все не очень просто
1. stackoverflow.com/questions/153152/resizing-an-ifr...
2. https://github.com/davidjbradshaw/iframe-resizer